EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語
404 Not Found

404 Not Found

nginx

JSON em JavaScript

JSON (JavaScript Object Notation) é um formato leve de troca de dados. Pense nele como uma caixa de envio padronizada — não importa o que você coloca dentro, a embalagem segue uma especificação universal para que o destinatário saiba exatamente como abrir. Comunicação front-end/back-end, arquivos de configuração, armazenamento local — JSON está em todo lugar.

Regras de Sintaxe do JSON

JSON se parece muito com um objeto literal JS, mas as regras são mais rígidas:

Regra Descrição
Chaves devem usar aspas duplas "nome" ✅ nome ❌ 'nome' ❌
Valores string devem usar aspas duplas "olá" ✅ 'olá' ❌
Sem vírgulas finais {"a":1,} ❌
Tipos de valor limitados string, número, booleano, null, objeto, array
Não permitido undefined, funções, comentários
JSON 
{
  "nome": "Alice",
  "idade": 25,
  "habilidades": ["HTML", "CSS", "JS"],
  "endereco": {
    "cidade": "São Paulo",
    "cep": "01001-000"
  },
  "ativo": true,
  "conjuge": null
}
⚠️ Sem aspas simples no JSON! O erro mais comum de iniciante é escrever 'chave' ou 'valor' — isso é válido em JS mas ilegal em JSON.

JSON.stringify()

JSON.stringify() converte um valor JS em uma string JSON — serialização.

HTML 
<script>
JSON.stringify(valor)
JSON.stringify(valor, substituidor)
JSON.stringify(valor, substituidor, espaco)
</script>
Parâmetro Descrição
valor O valor a serializar
substituidor Filtrar ou transformar — uma função ou array
espaco Indentação — número ou string, para formatação bonita

Exemplo: Serialização e Formatação

HTML 
<div id="output" style="white-space: pre; font-family: monospace; padding: 10px; border: 1px solid #ccc;"></div>

<script>
const aluno = {
  nome: 'Bob',
  idade: 20,
  notas: [95, 88, 92],
  ativo: true,
  serie: undefined,
  aniversario: new Date()
};

const output = document.getElementById('output');

const compacto = JSON.stringify(aluno);
output.textContent = 'Saída compacta:\n' + compacto + '\n\n';

const bonito = JSON.stringify(aluno, null, 2);
output.textContent += 'Saída formatada:\n' + bonito + '\n\n';

const filtrado = JSON.stringify(aluno, ['nome', 'notas'], 2);
output.textContent += 'Apenas nome e notas:\n' + filtrado;
</script>
▶ Experimente
💡 Nota: undefined, funções e Symbols são ignorados durante a serialização (propriedades desaparecem de objetos, viram null em arrays). Objetos Date são convertidos para strings ISO.

JSON.parse()

JSON.parse() converte uma string JSON de volta em um valor JS — desserialização.

HTML 
<script>
JSON.parse(texto)
JSON.parse(texto, recuperador)
</script>
Parâmetro Descrição
texto A string JSON
recuperador Uma função de transformação aplicada a cada par chave-valor

Exemplo: Desserialização

HTML 
<div id="output" style="white-space: pre; font-family: monospace; padding: 10px; border: 1px solid #ccc;"></div>

<script>
const output = document.getElementById('output');

const jsonStr = '{"nome":"Charlie","idade":30,"hobbies":["ler","programar"]}';

const obj = JSON.parse(jsonStr);

output.textContent = 'Resultado do parse:\n';
output.textContent += 'Nome: ' + obj.nome + '\n';
output.textContent += 'Idade: ' + obj.idade + '\n';
output.textContent += 'Hobbies: ' + obj.hobbies.join(', ') + '\n\n';

const arr = JSON.parse('[1, 2, 3, 4, 5]');
output.textContent += 'Array parseado: ' + arr + '\n';
output.textContent += 'Soma do array: ' + arr.reduce(function(a, b) { return a + b; }, 0);
</script>
▶ Experimente

JSON vs Objeto JS

Comparação JSON Objeto JS
Natureza String (texto) Estrutura de dados em memória
Aspas nas chaves Aspas duplas obrigatórias Omitíveis (para identificadores válidos)
Tipos de valor Limitados (6 tipos) Qualquer tipo
Vírgulas finais Não permitidas Permitidas
Comentários Não permitidos Suportados (via ferramentas)
💡 Maneira fácil de lembrar: JSON é "uma versão em string de objetos JS com validação rigorosa." Não é um objeto — é texto. Você precisa de parse para transformá-lo em um objeto com o qual pode trabalhar.

Exemplo: Erros Comuns de JSON

HTML 
<div id="output" style="white-space: pre; font-family: monospace; padding: 10px; border: 1px solid #ccc;"></div>

<script>
const output = document.getElementById('output');

function tentarParse(str, rotulo) {
  try {
    JSON.parse(str);
    output.textContent += rotulo + ': ✅ Sucesso\n';
  } catch (e) {
    output.textContent += rotulo + ': ❌ ' + e.message + '\n';
  }
}

tentarParse("{'nome':'Tom'}", 'Chave com aspas simples');
tentarParse('{"nome":"Tom",}', 'Vírgula final');
tentarParse('{"nome":undefined}', 'Valor undefined');
tentarParse('{"nome":"Tom"}', 'JSON válido');
tentarParse('{"a":1,"b":2}', 'JSON válido (sem espaços)');
</script>
▶ Experimente
💡 Os três erros de JSON mais comuns: aspas simples, vírgulas finais e undefined. Ao depurar problemas de JSON, cole no console do navegador com JSON.parse() — a mensagem de erro indicará o local exato.

📖 Resumo

  1. JSON é um formato de dados baseado em string — chaves devem ter aspas duplas, sem vírgulas finais, tipos de valor limitados
  2. JSON.stringify() serializa, JSON.parse() desserializa — são operações inversas
  3. undefined, funções e Symbols são ignorados ou viram null durante a serialização
  4. O parâmetro espaco em JSON.stringify torna a saída legível; o parâmetro substituidor filtra campos
  5. Fazer parse de JSON inválido lança uma exceção — sempre envolva em try/catch

❓ Perguntas Frequentes

P: Por que JSON.stringify(NaN) retorna null? R: A especificação JSON não tem NaN, Infinity ou -Infinity — todos viram null durante a serialização. Se precisar preservar esses valores, use uma função substituidor personalizada.

P: JSON.parse consegue fazer parse de literais de objeto JS? R: Não. JSON.parse('{}') funciona, mas JSON.parse('{a:1}') lança um erro — a chave falta aspas duplas. A sintaxe JSON é mais rigorosa que literais de objeto JS.

P: É possível escrever comentários em JSON? R: JSON padrão não suporta comentários. Se necessário, use um campo como "_comentario": "descricao" como alternativa, embora isso não seja uma convenção formal.

📝 Atividades

  1. Básico: Crie um array de 3 objetos de alunos e formate a saída com JSON.stringify (indentação de 2 espaços).
  2. Intermediário: Escreva uma função parseSeguro(str) que envolva JSON.parse em try/catch, retornando o resultado em caso de sucesso ou null com mensagem de erro em caso de falha.
  3. Desafio: Construa um "bloco de notas local" — use prompt para entrada, salve no localStorage com JSON.stringify, e carregue/exiba ao carregar a página com JSON.parse.
100%