Neste artigo você vai aprender a como carregar arquivo local de JSON com JavaScript, utilizando a fetch API

carregar arquivo local de JSON capa

Fala programador(a), beleza? Bora aprender mais sobre carregamento de arquivos com JavaScript!

Antigamente não era possível o carregamento de arquivos de forma nativa com JS

Geralmente utilizamos jQuery para fazer uma requisição assíncrona

Mas com o fetch API temos esta possibilidade!

Veja um exemplo de código:

const res = await fetch("file.json");

const data = await res.json();

console.log(data);

Desta maneira você consegue utilizar o fetch para carregar o arquivo local utilizando fetch e async/await

Note que alguns navegadores impedem esta ação por questões de segurança

Então o arquivo deverá ser carregado a partir de uma URL, assim não teremos problemas

Você pode utilizar a mesma técnica, porém a partir de uma URL

Quer aprender tudo sobre JSON? Se liga neste vídeo:

Conclusão

Neste artigo você aprendeu a carregar arquivo local de JSON

Utilizamos o fetch API como recurso nativo de JS para fazer o carregamento

Caso haja alguma falha por questões de segurança, tente utilizar a URL em que o arquivo se encontra

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias! Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os cursos!

Inscrever-se
Notificar de
guest

5 Comentários
mais antigos
mais recentes Mais votado
Feedbacks embutidos
Ver todos os comentários
Halejandro

Não consegui usar este código poderia me ajudar?

const bank = await fetch("bank.json")
Marcos

Você colocou a localização do arquivo? Em qual diretório ou pasta

Pedro Henrique

Olá, tudo bem? Quando eu tentei, deu que eu só poderia usar o await em funções assíncronas. Se estiver usando uma função, tenta colocar async no começo dela.
async function nomeDaFuncao() { etc
}

Ennio

e se o arquivo estiver em outro drive e outra pasta ?

felipe grassi ribon

ai tem q fazer o caminho “./projetos/arquivos/file.json” tipo isso