Aula 44 — Trabalhando com JSON

Na aula anterior, aprendemos a consumir APIs REST usando a Fetch API, fazendo requisições GET e POST.

Agora vamos entender melhor o formato que aparece o tempo todo nessas comunicações: o JSON.

🎯 Objetivo da aula

Ao final desta aula, você será capaz de:

• Entender o que é JSON
• Saber por que ele é usado em APIs
• Ler dados em formato JSON
• Converter JSON para JavaScript
• Converter JavaScript para JSON

O que é JSON?

JSON significa JavaScript Object Notation.

É um formato leve e padronizado para troca de dados entre sistemas.

Apesar do nome, o JSON não é exclusivo do JavaScript — ele é entendido por praticamente todas as linguagens.

Como é um JSON?

Veja um exemplo simples de JSON:

 { "nome": "Daniel", "idade": 30, "ativo": true } 

Ele se parece muito com um objeto JavaScript, mas existem diferenças importantes.

JSON × Objeto JavaScript

Objeto JavaScript:

 const usuario = { nome: "Daniel", idade: 30, ativo: true }; 

JSON:

 { "nome": "Daniel", "idade": 30, "ativo": true } 

• No JSON, as chaves sempre usam aspas duplas
• JSON não aceita funções
• JSON não aceita comentários

Por que APIs usam JSON?

APIs usam JSON porque ele é:

• Leve
• Fácil de ler
• Padronizado
• Compatível com várias linguagens

Por isso, ele virou o formato padrão da web moderna.

Convertendo JSON para JavaScript

Quando recebemos dados de uma API, eles vêm como texto em formato JSON.

Para transformar isso em um objeto JavaScript, usamos:

JSON.parse()

 const jsonTexto = '{"nome":"Ana","idade":25}';

const objeto = JSON.parse(jsonTexto);

console.log(objeto.nome);

 console.log(objeto.nome); // Saída será "Ana" 

Convertendo JavaScript para JSON

Quando queremos enviar dados para uma API, precisamos converter objetos JavaScript em JSON.

Para isso, usamos:

JSON.stringify()

 
  const usuario = { nome: "Carlos", idade: 40 };
  const json = JSON.stringify(usuario);
  console.log(json);

 console.log(json); // Saída será '{"nome":"Carlos","idade":40}' 

JSON no fetch (relembrando)

Agora tudo faz sentido:

• response.json() → converte JSON para JavaScript
• JSON.stringify() → converte JavaScript para JSON

 
  fetch("https://api.exemplo.com/dados") 
  .then(response => response.json()) 
  .then(dados => 
  { 
    console.log(dados); 
  }); 

Erros comuns com JSON

• Aspas simples em vez de duplas
• Vírgula sobrando no final
• Tentar colocar funções
• JSON malformado

Na próxima etapa, vamos aplicar tudo isso em projetos práticos e cenários do mundo real.