Formatador JSON: Embelezar e Validar JSON Online Grátis

O que é um formatador JSON?

Um formatador JSON é uma ferramenta que recebe texto JSON (JavaScript Object Notation) e o reescreve com recuos e quebras de linha, sem alterar os próprios dados. JSON é um formato de texto simples para armazenar e enviar dados estruturados, formado por pares nome/valor e listas. Os programas geralmente economizam espaço removendo todos os espaços em branco extras, o que produz uma única linha densa e difícil de ler. Um formatador, também chamado de embelezador ou impressor formatado, adiciona esses espaços em branco novamente de maneira consistente, tornando a estrutura visível. Essa ferramenta formata o JSON automaticamente enquanto ele é digitado ou colado. Não há botão de formatação; a saída é atualizada a cada tecla pressionada. Um botão de redefinição limpa a entrada, e um botão de cópia copia o resultado formatado.

Regras de sintaxe do JSON

O JSON é definido por uma especificação chamada RFC 8259. Ele tem dois tipos de contêiner:

Objetos armazenam pares nome/valor entre chaves:

Arrays armazenam listas ordenadas entre colchetes:

Um valor em JSON deve ser de um dos seis tipos: uma string, um número, um booleano (true ou false), null, um objeto ou um array.

Algumas regras causam a maioria dos erros:

• Os nomes de propriedades devem estar entre aspas duplas. {name: "John"} é inválido; deve ser {"name": "John"}.
• Strings devem usar aspas duplas, não aspas simples.
• Uma vírgula não pode vir depois do último item de um objeto ou array (não são permitidas vírgulas finais).
• O JSON não tem sintaxe para comentários, embora sua aparência com chaves e colchetes venha do JavaScript.
• O JSON não tem undefined. Use null para um valor ausente.

Um erro comum é colar um literal de objeto JavaScript em vez de JSON. {name: 'John', age: undefined} é JavaScript válido, mas não é JSON válido. A versão em JSON é {"name": "John", "age": null}.

Como este formatador JSON funciona

Muitos formatadores JSON passam o texto por JSON.parse() para criar um objeto JavaScript e depois executam JSON.stringify() para transformá-lo novamente em texto com espaçamento. Essa conversão de ida e volta tem um efeito colateral: os números JavaScript são números de ponto flutuante de precisão dupla IEEE 754, que não conseguem representar todos os inteiros exatamente quando ultrapassam 2^53 − 1 (9,007,199,254,740,991). Um ID como 9007199254740993 pode sair como 9007199254740992 depois dessa conversão.

Esta ferramenta evita essa etapa. Ela lê a entrada caractere por caractere com um pequeno analisador escrito manualmente e, em vez de converter cada número ou string em um valor JavaScript, copia esse trecho de texto exatamente como foi escrito e depois o coloca no nível correto de recuo. Como os números nunca são convertidos em ponto flutuante, inteiros de qualquer tamanho mantêm seus dígitos exatos. Se um objeto tiver a mesma chave escrita duas vezes, as duas cópias são mantidas em seus lugares, em vez de a última ocorrência substituir as anteriores, como aconteceria ao criar um objeto JavaScript.

O processo, passo a passo:

1. Leia o próximo token (um objeto, array, string, número, true, false ou null).
2. Verifique-o em relação à gramática do JSON. Rejeite-o se violar uma regra, como uma chave sem aspas ou uma vírgula final.
3. Copie o texto do token sem alterações para a saída.
4. Adicione uma quebra de linha e recue 2 espaços para cada nível de aninhamento dentro de um objeto ou array. Um objeto ou array vazio permanece em uma única linha, como {} ou [].
5. Repita até que toda a entrada tenha sido lida.

O recuo é fixo em 2 espaços; não há configuração para alterá-lo. Enquanto a caixa de entrada estiver vazia, o painel de saída mostrará o texto de espaço reservado "O JSON formatado aparecerá aqui automaticamente...". Se a entrada violar uma regra do JSON, a ferramenta exibirá a mensagem "JSON inválido: verifique sua entrada", em vez de uma mensagem técnica do analisador com a posição exata do caractere. Já o JSON.parse() integrado dos navegadores informa a posição do caractere no texto do erro.

Exemplo prático

Esta entrada minificada:

torna-se:

Cada objeto ou array aninhado recebe um nível de recuo a mais que seu elemento pai, de modo que a relação entre address e seus três campos fique visível de imediato.

Um segundo exemplo mostra por que é importante copiar os literais. Esta entrada:

é formatada como:

Os dígitos permanecem exatamente como foram digitados. Um formatador baseado em JSON.parse() seguido de JSON.stringify() transformaria silenciosamente esse número em 9007199254740992.

Erros comuns de JSON

• Nome de propriedade sem aspas: {name: "John"}. Correção: {"name": "John"}.
• Vírgula final: {"age": 30,}. Correção: remova a vírgula que vem antes da chave de fechamento.
• Colchetes incompatíveis: {"data": [1, 2}. Correção: feche o array com ] antes de fechar o objeto.
• String não fechada: {"name": "John}. Correção: adicione a aspa de fechamento ausente.
• Aspas simples: {'name': 'John'}. Correção: use aspas duplas.
• undefined, NaN ou Infinity: nenhum deles é um valor JSON válido. Use null ou uma string.

Uma fonte frequente desses erros é copiar um objeto diretamente do console do navegador ou de um registro do servidor, que muitas vezes inclui sintaxe exclusiva do JavaScript e precisa ser limpa antes de se tornar um JSON válido.

Quando usar um formatador JSON

Os formatadores JSON são usados com mais frequência para inspecionar respostas de APIs, que geralmente são enviadas minificadas para economizar largura de banda. Eles também são usados para verificar manualmente arquivos de configuração, como package.json ou composer.json, ler dados copiados do armazenamento local ou do console de um navegador e entender a estrutura de um conjunto de dados recebido de outro sistema.

Outras formas de formatar JSON

• Ferramentas de desenvolvedor do navegador: Chrome, Edge e Firefox formatam automaticamente as respostas JSON no painel de visualização da aba Rede.
• Editores de código: o Visual Studio Code formata um arquivo JSON aberto com Alt+Shift+F (Shift+Option+F em um Mac). A maioria dos editores tem um atalho equivalente ou uma extensão de formatação.
• Linha de comando: jq (jq . file.json) e o python -m json.tool file.json integrado do Python formatam JSON a partir de um terminal.

Incorporando a formatação JSON ao código

A maioria das linguagens de programação inclui uma biblioteca JSON com uma opção de recuo. Em JavaScript:

Em Python:

As duas abordagens analisam o texto em uma estrutura de dados nativa e depois o serializam novamente com espaçamento. É simples escrever isso, mas os números podem ser alterados. O JavaScript armazena todos os números como valores de precisão dupla, portanto 9007199254740993 volta como 9007199254740992. O Python mantém os números inteiros exatos, porque os inteiros do Python não têm limite de tamanho, mas ainda reescreve 1.0e2 como 100.0 e transforma 1e999 em Infinity, o que não é JSON válido. Aplicações que precisam de inteiros grandes exatos, como IDs de banco de dados, frequentemente os armazenam como strings em JSON, e não como números.

Uma breve história do JSON

Douglas Crockford especificou o JSON no início dos anos 2000, baseando sua sintaxe nos literais de objeto do JavaScript, mas tornando-o utilizável em qualquer linguagem. A RFC 4627 o formalizou em 2006. Ele se espalhou rapidamente porque era mais curto de escrever que XML e correspondia diretamente aos objetos JavaScript, algo importante quando as aplicações web começaram a buscar dados em segundo plano em vez de recarregar páginas inteiras. Nos anos 2010, tornou-se o formato padrão para APIs REST e bancos de dados como o MongoDB.

Dúvidas frequentes

O que é um formatador JSON? Uma ferramenta que adiciona recuos, quebras de linha e espaçamento ao texto JSON para que sua estrutura seja fácil de ler, sem alterar os dados.

A formatação altera os dados? Não. A formatação altera apenas os espaços em branco. Esta ferramenta copia cada string e número exatamente como foram digitados, portanto os valores na saída formatada correspondem precisamente à entrada, incluindo números grandes demais para serem armazenados com exatidão como um número JavaScript.

Por que recebo um erro de "JSON inválido"? A entrada viola uma regra do JSON. As causas comuns são nomes de propriedades sem aspas, uma vírgula final, aspas simples, uma string não fechada ou colchetes incompatíveis. Esta ferramenta não mostra a posição exata do caractere com problema; verificar a entrada em relação às regras listadas acima geralmente permite encontrá-lo rapidamente.

O JSON pode ter comentários? Não. A especificação não os permite. Formatos como JSONC e JSON5 adicionam suporte a comentários à sintaxe do JSON para situações em que isso é útil, como arquivos de configuração.

Qual é o recuo padrão do JSON? Dois espaços são a convenção mais comum no desenvolvimento web e são usados por esta ferramenta. Alguns guias de estilo usam quatro espaços ou tabulações; a especificação do JSON não exige nenhum recuo específico.

Qual é a diferença entre JSON.parse() e JSON.stringify()? JSON.parse() transforma uma string JSON em um valor JavaScript. JSON.stringify() faz o inverso, transformando um valor JavaScript em uma string JSON, e aceita um argumento de recuo para impressão formatada. Esta ferramenta não usa nenhuma das duas funções internamente, o que permite preservar exatamente os inteiros grandes.

Referências

1. RFC 8259 — O formato de intercâmbio de dados JavaScript Object Notation (JSON)
2. MDN Web Docs: JSON
3. json.org