Como exibir JSON de forma bonita em JavaScript: guia completo

Introdução: Por que o JSON parece uma bagunça e como corrigir isso?

Você já abriu o console do navegador, viu uma linha quilométrica sem um único espaço e pensou: "Onde está o erro?"? Isso é um clássico. JSON é uma linguagem universal de troca de dados, mas em sua forma bruta, é tão legível quanto um manual de micro-ondas em japonês. Especialmente quando há muitos dados: objetos aninhados, arrays, strings longas.

Felizmente, o JavaScript possui ferramentas integradas que transformam essa "bagunça" em uma beleza organizada e estruturada. O processo é chamado de pretty-print JSON (ou "exibição bonita"). Neste artigo, abordaremos todas as formas: desde o básico JSON.stringify até soluções personalizadas avançadas. Você aprenderá não apenas a ler JSON, mas a fazer isso com conforto.

O artigo foi escrito para pythonlib.ru — um recurso educacional onde amamos explicações claras e exemplos práticos. Vamos lá!

O que é pretty-print JSON e por que é necessário?

Pretty-print (ou prettify) é o processo de formatação de dados estruturados (JSON, XML, YAML) com indentação, quebras de linha e alinhamento. Visualmente, parece um código bem formatado, em vez de uma única linha longa.

Por que é necessário?

\n
• Depuração (debugging). Você vê a estrutura do objeto: onde estão as chaves, objetos aninhados, arrays.
\n
• Leitura de logs. No console do navegador ou logs do servidor, o JSON formatado salva os olhos.
\n
• Documentação. Exemplos de JSON na documentação estão sempre em pretty-print.
\n
• Aprendizado. Iniciantes entendem melhor a estrutura dos dados quando ela é dividida em níveis.
\n

Em JavaScript, existem duas maneiras principais de obter um JSON bonito: o integrado JSON.stringify e bibliotecas de terceiros (por exemplo, pretty-js). Mas vamos começar com o básico.

Método 1: JSON.stringify() com parâmetros (o mais popular)

Você provavelmente conhece o método JSON.stringify(). Ele transforma um objeto em uma string JSON. Mas ele tem um segundo e terceiro parâmetros que fazem milagres.

Sintaxe

JSON.stringify(value, replacer, space)

\n
• value — seu objeto ou array.
\n
• replacer — uma função ou array para filtrar chaves (geralmente null).
\n
• space — número de espaços para indentação (ou uma string, por exemplo "\\t" para tabulação).
\n

Exemplo 1: Pretty-print básico com espaços

const user = {\n  name: "Alexey",\n  age: 30,\n  skills: ["JavaScript", "Python", "SQL"],\n  address: {\n    city: "Moscow",\n    zip: 101000\n  }\n};\n\n// Sem formatação — uma única linha\nconsole.log(JSON.stringify(user));\n// {"name":"Alexey","age":30,"skills":["JavaScript","Python","SQL"],"address":{"city":"Moscow","zip":101000}}\n\n// Com formatação — beleza!\nconsole.log(JSON.stringify(user, null, 2));\n

Resultado no console:

{\n  "name": "Alexey",\n  "age": 30,\n  "skills": [\n    "JavaScript",\n    "Python",\n    "SQL"\n  ],\n  "address": {\n    "city": "Moscow",\n    "zip": 101000\n  }\n}\n

Observe: a indentação de 2 espaços tornou a estrutura legível. Você pode usar 4 espaços ou tabulação ("\\t").

Exemplo 2: Usando replacer para filtrar

Às vezes, você precisa exibir apenas parte dos dados. O segundo parâmetro replacer pode ser um array de chaves.

const filtered = JSON.stringify(user, ["name", "skills"], 2);\nconsole.log(filtered);\n// {\n//   "name": "Alexey",\n//   "skills": [\n//     "JavaScript",\n//     "Python",\n//     "SQL"\n//   ]\n// }\n

Ou uma função:

const replacerFunc = (key, value) => {\n  if (key === "age") return undefined; // excluímos