JSON em JavaScript
A página anterior só mudava a forma da chamada, e this seguia essa chamada. Esta página deixa isso de lado. O produto continua na memória, com o nome e o preço no próprio objeto. Para entregar os mesmos fatos a um arquivo, a outro programa ou a uma página seguinte, você precisa de um texto com forma fixa. Esse texto se chama JSON.
O objeto vivo não é esta nota
Enquanto o script roda, o literal continua lá e um método pode ficar nele; this ainda depende da chamada, como na lição anterior. JSON é só uma cadeia: não tem métodos e não escolhe this.
O que o texto pode guardar
📊 Objeto vivo contra texto JSON
| Peça | Literal de objeto | Texto JSON |
|---|---|---|
| Aspas da chave | opcionais | aspas duplas obrigatórias |
| Aspas do texto | simples ou duplas | só duplas |
| Vírgula final | permitida | proibida |
| Função | pode ser um método | stringify a omite; digitada no texto, é inválida |
| Campo undefined | um valor real | some quando stringify percorre o objeto |
Não traga para este texto os hábitos do literal. Cada chave e cada cadeia precisam de aspas duplas. Uma vírgula no fim, um comentário dentro do texto e uma função solta não são JSON válido. A tabela diz qual hábito some e qual o parse nem aceita.
let product = {
name: "Mug",
price: 12
};
console.log(JSON.stringify(product));
stringify escreve a nota
JSON.stringify percorre os campos simples e devolve uma cadeia; o console mostra {"name":"Mug","price":12} e product não muda. O nome você continua lendo no objeto vivo e obtém Mug. A cadeia é outro valor, que dá para guardar ou enviar.
let text = '{"name":"Mug","price":12}';
let product = JSON.parse(text);
console.log(product.name);
parse monta um valor a partir da nota
text continua sendo uma cadeia, com aspas e chaves. JSON.parse constrói um objeto novo a partir desse texto. Depois product.name vale Mug. Aqui nenhum método é chamado e this não entra.
let text = '{"name":"Mug","tags":["ceramic","gift"]}';
let product = JSON.parse(text);
console.log(product.tags[0]);
Uma lista pode ficar dentro da nota
O texto JSON pode carregar um array; depois de parse, product.tags é um array de verdade e a primeira casa é ceramic. O array como assunto próprio vem a seguir, e aqui ele só é carga dentro do texto.
let product = {
name: "Mug",
price: undefined,
tag() {
return this.name;
}
};
console.log(JSON.stringify(product));
A nota guarda dados, não comportamento
price valia undefined. tag era uma função. Os dois somem do texto. O que aparece é só {"name":"Mug"}. O comportamento fica no objeto vivo e não viaja na nota.
let text = "{name:'Mug'}";
try {
JSON.parse(text);
console.log("ok");
} catch (err) {
console.log("bad text");
}
Uma nota desleixada não é lida
Aspas simples e uma chave sem aspas valem num literal e não valem em JSON; por isso JSON.parse lança um erro e o catch imprime bad text em vez de derrubar esta demo. Corrija o texto com aspas duplas na chave e na cadeia. Isto ainda não é a lição de erros, só mostra que JSON malformado para o parse.
A direção indica a ferramenta
Da memória para o texto você vai com stringify, e do texto para o valor volta com parse. Se depois precisar de uma função no produto, acrescente-a após o parse, porque a nota não a trouxe. this continua dependendo da chamada e não do JSON, e a próxima lição são os arrays: uma lista viva no script, não outra regra de JSON.
Mostre um campo da nota
Leia uma cadeia pequena do produto com parse. Escreva o nome no parágrafo. Não monte o objeto com chaves dentro do script.
<!DOCTYPE html>
<html>
<head>
<title>json — page</title>
</head>
<body>
<p id="line">…</p>
<script>
let text = '{"name":"Mug","price":12}';
let product = JSON.parse(text);
let box = document.getElementById("line");
box.textContent = product.name;
</script>
</body>
</html>
O parágrafo mostra Mug porque o script só leu texto e não construiu um literal. Mude o nome dentro da cadeia e recarregue para a linha acompanhar.
Passos de prática
- Aplique stringify à caneca e leia o texto entre aspas; depois faça parse da mesma forma e veja
Mug. - Leia a nota que inclui
tagse obtenhaceramic. - Aplique stringify a um objeto com método e preço
undefinedpara que no texto fique sóname, e ponha uma nota com chave sem aspas emtry/catchaté aparecerbad text. - Na demo HTML mude só o nome dentro da cadeia, recarregue e leia o parágrafo.
Escorregões frequentes
- Tratar o texto JSON como se fosse um literal, e passar aspas simples ou uma chave nua ao
parse - Esperar que um método ou
undefinedsobrevivam aostringify - Chamar
parsequando você queria texto, oustringifyquando o texto já estava pronto, e ler o nome na própria cadeia em vez do valor que oparsedevolveu - Achar que a página seguinte ainda é JSON, quando arrays são uma lista viva
Resumo
- JSON é texto que descreve dados, e
stringifytransforma um objeto simples nesse texto parsedevolve o texto a um valor- A chave e a cadeia pedem aspas duplas; uma vírgula final ou aspas simples fazem o
parsefalhar - Métodos e campos
undefinedsaem do texto - Um campo lido pode preencher uma linha da página, e a seguir vêm os arrays, uma lista viva no script
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo