O que é JSON e por que ele se tornou o "Esperanto" da Web?
Entenda a estrutura de dados que conecta o front-end ao back-end e aprenda a evitar os erros mais comuns de sintaxe.
Se você está começando no mundo da programação, com certeza já ouviu falar em JSON (JavaScript Object Notation). Ele está em todo lugar: nas configurações do VS Code, nas respostas de APIs e até em bancos de dados NoSQL.
Mas por que essa estrutura simples de chaves {} e colchetes [] desbancou o antigo gigante XML e se tornou o padrão absoluto da web?
A Simplicidade Venceu
O JSON foi popularizado por Douglas Crockford no início dos anos 2000. A ideia era ter um formato de troca de dados que fosse legível por humanos e fácil de ser interpretado por máquinas.
Diferente do XML, que exige tags de abertura e fechamento verbosas (ex: <nome>Thiago</nome>), o JSON é direto ao ponto: {"nome": "Thiago"}. Isso economiza banda de internet e processamento.
A Sintaxe Básica
Para um JSON ser válido, ele precisa seguir regras estritas. É aqui que muitos desenvolvedores travam suas aplicações. As regras de ouro são:
- As chaves (keys) devem estar sempre entre aspas duplas:
"usuario": "admin". - Não pode haver vírgula após o último elemento de uma lista ou objeto (o famoso erro Trailing Comma).
- Aspas simples
'não são permitidas, apenas aspas duplas".
Dica de Ferramenta
Está com um código JSON gigante e não sabe onde está o erro? Use nosso Formatador e Validador JSON gratuito para encontrar a falha instantaneamente e identar o código.
JSON vs Objeto JavaScript
Embora o nome seja "JavaScript Object Notation", JSON não é a mesma coisa que um objeto JS. O JSON é um formato de texto (string).
Para usar um JSON que vem do servidor no seu código JavaScript, você precisa "parsear" ele:
const dados = JSON.parse(respostaDoServidor);E para enviar dados do seu código para uma API, você precisa transformá-lo em string:
const jsonParaEnviar = JSON.stringify(meuObjeto);Conclusão
Dominar a estrutura JSON é o primeiro passo para se tornar um desenvolvedor Full Stack. É a linguagem universal que permite que um site feito em React converse com um servidor em Python, Java ou PHP.
Sempre que precisar limpar, organizar ou validar seus dados, lembre-se de ter ferramentas confiáveis à mão para agilizar seu trabalho.