Como ler arquivo de JSON externo com JavaScript

Neste artigo você vai aprender a como ler arquivo de JSON externo, vamos utilizar um recurso simples para conversão do dado

ler arquivo de JSON externo capa

Fala programador(a), beleza? Bora aprender mais sobre JSON!

Primeiramente vamos precisar ter o arquivo dentro das pastas do nosso projeto

Formação Claude Code
Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

  • 114 aulas
  • 4 projetos
  • 9h 18min

Da mesma maneira que um arquivo de script comum de JavaScript

Podemos então linkar o arquivo no noss projeto através da tag script, desta maneira:

 <script type="text/javascript" src="meuarquivo.json"></script>

Agora temos acesso aos dados que estão dentro do arquivo

Mas antes de utilizá-los precisamos converter, fazemos isso a partir do objeto JSON

Ele possui dois métodos:

  • stringify: objeto para JSON;
  • parse: JSON para objeto;

Utilizaremos então o parse desta maneira:

const data = JSON.parse(jsonData);

console.log(data);

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

Note que no código acima precisamos ter uma variável declarada no arquivo JSON com o nome de jsonData

Estes nomes de variáveis você pode adaptar para os do seu projeto

A estrutura deve ser semelhante a esta:

jsonData = '[{"dado": 1, "outro_dado": "agora temos um texto"}]';

Conclusão

No artigo de hoje você aprendeu a como ler arquivo de JSON externo

Utilizamos a tag script para linkar o arquivo no nosso projeto, tendo assim os dados disponíveis

Depois bastou converter os dados para um objeto JavaScript com o método parse, e assim temos acesso ao JSON!

Deseja programar de forma profissional? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!

Escrito por | Matheus Battisti

Matheus Battisti
Fundador da Hora de Codar

Programador apaixonado pelo mundo das tecnologias, sempre buscando em aprender e se aprofundar em linguagens, frameworks e o que mais for necessário para executar um bom trabalho. Agora tem uma nova missão que é de passar seu conhecimento adiante para formar novos programadores e especializar mais os que já são.

Subscribe
Notify of
guest

0 Comentários
Oldest
Newest Most Voted

Formações

Formação Vibe Coding

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

  • 474 aulas
  • 20 projetos
  • 39h 27min

Blog | Mais populares