FlowingDev

JSON, explicado: o formato de dados favorito da internet

Aprenda os fundamentos do JSON (JavaScript Object Notation), o formato leve de intercâmbio de dados que move as APIs e aplicações web modernas.

Testar a ferramenta: Visualizador JSON

Em uma frase

JSON é um jeito, em formato de texto, de organizar dados como se fossem uma lista ou um dicionário, tornando ridiculamente fácil para computadores e humanos lerem, escreverem e trocarem informações.

O problema que ele resolve

Imagine a web do início dos anos 2000. Se você quisesse que sua página buscasse novos dados sem recarregar a página inteira (um novo conceito da moda chamado AJAX), você provavelmente estava quebrando a cabeça com XML. XML (eXtensible Markup Language) era o campeão reinante do intercâmbio de dados. Era poderoso, rigoroso e... francamente, um tanto parrudo.

Um documento XML é verboso. Cada pedaço de dado é envolto por tags de abertura e fechamento.

<user>
  <id>123</id>
  <name>Alex</name>
  <isAdmin>true</isAdmin>
</user>

Não é terrível, mas é inchado. Mais importante, fazer o parsing disso em JavaScript — a linguagem do navegador — era um porre. Você tinha que navegar por um complexo Document Object Model (DOM), lidando com nós, atributos e conteúdo de texto. Parecia que estávamos usando uma marreta para quebrar uma noz.

Aí entra em cena Douglas Crockford, um desenvolvedor trabalhando no que viria a ser o Yahoo!. Ele notou algo genial: o JavaScript já tinha uma forma perfeitamente boa e nativa de definir dados estruturados. Chamava-se "notação de objeto literal".

// Isso é apenas JavaScript puro e simples!
var user = {
  "id": 123,
  "name": "Alex",
  "isAdmin": true
};

Crockford percebeu que esse subconjunto da sintaxe do JavaScript era um formato de dados fantástico por si só. Era leve, fácil para humanos lerem e — essa era a 'killer feature' — trivial para o JavaScript "parsear". Você podia basicamente rodar um eval() nele (embora, por razões de segurança, hoje usemos métodos mais seguros como JSON.parse()).

Ele formalizou esse formato, deu-lhe o nome JavaScript Object Notation (JSON) e criou um site simples de uma página explicando-o. Ele resolveu o problema de precisar de um formato de dados que fosse menos volumoso que o XML e nativo ao ambiente da web. O JSON se espalhou como fogo, tornando-se o padrão de facto para APIs, arquivos de configuração e inúmeras outras aplicações. Ele venceu porque era simples, prático e nascido da própria linguagem para a qual foi projetado para servir.

Como funciona por debaixo dos panos

Na sua essência, JSON é só um conjunto de regras para escrever dados em formato de texto. Pense nele como um molde universal para uma estrutura de dados. Ele tem apenas duas maneiras de estruturar as coisas e seis tipos de dados simples para colocar dentro delas.

Os Blocos de Construção: Tipos de Dados

A elegância do JSON vem de seu conjunto minimalista de tipos de valor. Tudo em JSON é um destes.

Tipo Exemplo Descrição
String "Olá, mundo!" Uma sequência de caracteres Unicode, envolvida por aspas duplas.
Number 42, -3.14, 2.99e8 Um número inteiro ou de ponto flutuante. Sem NaN ou Infinity.
Boolean true, false Os valores lógicos para verdadeiro e falso, sempre em minúsculas.
Null null Representa a ausência intencional de um valor, sempre em minúsculas.
Array [1, "dois", false] Uma lista ordenada de valores, entre colchetes [].
Object {"key": "value"} Uma coleção não ordenada de pares chave/valor, entre chaves {}.

É isso. Sem datas, sem funções, sem tipos especiais. Essa simplicidade é uma feature, não um bug, pois garante que os dados possam ser entendidos por praticamente qualquer linguagem de programação.

A Estrutura: Objetos e Arrays

A verdadeira mágica acontece quando você combina esses blocos de construção.

  • Objetos (Objects) são para quando você tem uma coleção de coisas nomeadas. As "chaves" (keys, os nomes) devem ser strings entre aspas duplas. Os "valores" podem ser qualquer um dos seis tipos de dados, incluindo outro objeto ou um array. É assim que você cria hierarquia.

  • Arrays são para quando você tem uma lista ordenada de coisas. A ordem importa, e você acessa os itens pela sua posição (índice), começando do zero.

Vamos construir um perfil de usuário simples. É um objeto porque tem propriedades nomeadas como name e email. Uma dessas propriedades, skills, é uma lista, então usamos um array.

{
  "userId": "u-9a8b7c",
  "username": "CodeWizard",
  "isActive": true,
  "lastLogin": null,
  "profile": {
    "realName": "Dana Scully",
    "location": "Washington, D.C."
  },
  "skills": [
    "Patologia Forense",
    "Armas de Fogo",
    "Ceticismo Racional"
  ]
}

Sacou o aninhamento? Um objeto (profile) é um valor dentro do objeto principal. Um array (skills) é outro valor. Essa estrutura em árvore pode ir tão fundo quanto você precisar, permitindo modelar dados incrivelmente complexos.

Em JavaScript, acessar esses dados é maravilhosamente intuitivo: data.username lhe daria "CodeWizard". data.profile.realName lhe daria "Dana Scully". data.skills[0] lhe daria "Patologia Forense".

Esse mapeamento direto para as estruturas nativas da linguagem é o motivo pelo qual os desenvolvedores o adoram.

As Regras do Jogo: Sintaxe

Para ser um JSON válido, você precisa seguir algumas regras rígidas. Essa rigidez é o que o torna tão confiavelmente "parseável" por máquinas.

  1. Apenas Aspas Duplas: Todas as chaves e todos os valores de string DEVEM estar entre aspas duplas ("). Aspas simples (') são um erro de sintaxe.
  2. Sem Vírgulas no Final: Uma vírgula é usada para separar elementos em um array ou pares em um objeto. Você não pode ter uma vírgula após o último item.
    // RUIM! Vírgula extra depois de `true`
{
  "key1": "value1",
  "key2": true, 
}
  3. Objetos e Arrays: Os dados são estruturados em objetos ({}) ou arrays ([]). Um documento JSON válido pode ser um único valor (como a string "hello"), mas quase sempre é um objeto ou array como o contêiner de nível superior.
  4. Espaços em Branco são Flexíveis: Espaços, tabs e novas linhas fora das strings não importam. Isso permite tanto formatos "bonitinhos" (pretty) com indentação para leitura humana quanto formatos "minificados" (minified) em linha única para transferência eficiente pela rede.

Histórias do mundo real

O Feed da Rede Social

Uma desenvolvedora front-end, Maya, tem a tarefa de construir o feed de rolagem infinita para uma nova rede social. Toda vez que o usuário rola para perto do final da página, seu código JavaScript precisa pedir mais posts ao servidor. O servidor não responde com HTML, mas com dados puros. Ele envia um array JSON, onde cada item é um objeto representando um post. Este objeto contém o texto do post, o nome de usuário do autor, um link para a foto de perfil, o número de curtidas e até um array aninhado com os primeiros comentários. O código de Maya recebe esse JSON limpo, percorre o array e cria dinamicamente o HTML para cada post, adicionando-o à página.

A lição: JSON é a alma das aplicações web dinâmicas modernas, agindo como o mensageiro leve entre o cérebro do servidor e a apresentação no navegador.

A Configuração do Jogo

Um desenvolvedor de jogos indie, Leo, está criando um RPG. Ele precisa gerenciar centenas de itens: espadas, poções, armaduras, etc. Embutir ("hard-codar") as propriedades de cada item (nome, dano, peso, preço) diretamente no código C++ do jogo seria um pesadelo para balancear e atualizar. Em vez disso, ele cria um arquivo items.json. É um objeto JSON gigante onde cada chave é um ID de item (como "longsword") e o valor é outro objeto contendo todas as suas estatísticas. Quando o jogo começa, ele lê este arquivo и carrega todos os dados dos itens na memória. Para rebalancear o jogo, ele só precisa editar o arquivo de texto, sem precisar recompilar nada.

A lição: JSON é um formato excelente para arquivos de configuração, separando os dados de uma aplicação da sua lógica e tornando-os facilmente editáveis por humanos.

A Orquestra de Microsserviços

Uma engenheira de backend, Fatima, trabalha em um sistema composto por dezenas de microsserviços. Um "serviço de usuário" gerencia contas de usuário, um "serviço de pedido" gerencia compras e um "serviço de notificação" envia e-mails. Quando um usuário faz um pedido, o serviço de pedido precisa confirmar o endereço de entrega do usuário. Ele não consulta o banco de dados diretamente; em vez disso, faz uma requisição HTTP para o endpoint da API do serviço de usuário, como GET /api/users/123/address. O serviço de usuário responde com um objeto JSON simples: {"street": "Rua Principal, 123", "city": "Qualquerlugar"}. O serviço de pedido faz o parsing disso, valida o pedido e, em seguida, envia uma requisição para o serviço de notificação (também com um payload JSON) para enviar o recibo por e-mail.

A lição: Em um sistema distribuído, o JSON serve como um contrato universal e agnóstico de linguagem, permitindo que serviços escritos em Go, Python e Node.js se comuniquem perfeitamente entre si.

Erros e armadilhas comuns

  • Vírgulas no Final: Este é o erro de validação mais comum. Arrays e objetos JavaScript costumam ser mais permissivos, mas o JSON é estrito: sem vírgula após o último elemento em uma coleção.
  • Comentários: JSON não tem comentários. Ponto final. Desenvolvedores acostumados com // ou /* */ muitas vezes tentam adicioná-los, o que invalida imediatamente o JSON. O "hack" oficial é adicionar uma chave como "_comment": "Sua anotação aqui", que um parser tratará apenas como mais um dado.
  • Aspas Simples vs. Aspas Duplas: Todas as chaves e todas as strings devem usar aspas duplas ("). Se você vem dos dicionários Python ou de alguns guias de estilo de JavaScript, pode estar acostumado com aspas simples, mas elas são proibidas em JSON.
  • Undefined Não Existe: Em JavaScript, uma propriedade de objeto ausente é undefined. O JSON não tem esse conceito. Para representar um valor ausente ou vazio, você deve usar null explicitamente.
  • Aspas Sem Escape: Se o valor da sua string precisa conter uma aspa dupla, você deve escapá-la com uma barra invertida (\). Esquecer isso ({"quote": "Ela disse "Olá""}) vai quebrar a estrutura. O jeito certo é {"quote": "Ela disse \"Olá\""}.

Por que isso deve estar no seu radar

No desenvolvimento de software moderno, o JSON não está apenas "no radar"; ele é o próprio radar. É o formato padrão para tantas tarefas críticas que não estar familiarizado com ele é como ser um chef que não sabe o que é sal.

Você deve pensar em JSON sempre que:

  • Estiver construindo ou consumindo uma API web.
  • Precisar de um arquivo de configuração para uma aplicação.
  • Precisar armazenar dados estruturados em um arquivo de texto simples ou em um banco de dados NoSQL como o MongoDB.
  • Estiver enviando dados de um processo do lado do servidor para uma aplicação JavaScript do lado do cliente.
  • Precisar de um formato simples e legível por humanos para serializar um objeto a fim de enviá-lo pela rede ou salvá-lo em disco.

Essencialmente, se você precisa que dois programas diferentes conversem entre si, ou se precisa separar seus dados do seu código, JSON é quase sempre sua primeira e melhor resposta.

Aprofunde-se

Teoria feita. Hora de pôr a mão na massa — 100% no seu navegador.

Testar a ferramenta: Visualizador JSON