Como carregar arquivo local de JSON com JavaScript

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

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

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

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!