Formatação JSON em JavaScript: Um Guia Completo

JSON (JavaScript Object Notation) é um formato leve de troca de dados frequentemente usado em aplicações web para transmitir dados entre servidores e clientes. Dados JSON brutos, especialmente objetos complexos, podem ser difíceis de ler. Felizmente, JavaScript oferece métodos integrados para melhorar a legibilidade e o gerenciamento de JSON.

Sumário

• Formatando Objetos JSON com JSON.stringify()
• Reformatando Strings JSON usando JSON.stringify() e JSON.parse()

Formatando Objetos JSON com JSON.stringify()

O método JSON.stringify() é a ferramenta principal para converter objetos JavaScript em strings JSON. Embora por padrão gere uma saída compacta, o parâmetro opcional space controla a formatação. Este parâmetro especifica o nível de indentação.

Considere este objeto JavaScript:

const myDataObject = {
  name: "John Doe",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Anytown",
    zip: "12345"
  },
  skills: ["JavaScript", "HTML", "CSS"]
};

Para formatar isso em uma string JSON legível, use JSON.stringify() com o parâmetro space:

const formattedJson = JSON.stringify(myDataObject, null, 2); // 2 espaços para indentação
console.log(formattedJson);

Isso produz:

{
  "name": "John Doe",
  "age": 30,
  "address": {
    "street": "123 Main St",
    "city": "Anytown",
    "zip": "12345"
  },
  "skills": [
    "JavaScript",
    "HTML",
    "CSS"
  ]
}

O 2 em JSON.stringify(myDataObject, null, 2) define a indentação para 2 espaços. Ajuste este valor (por exemplo, 4 ou “t” para tabulações) de acordo com sua preferência. O null é um espaço reservado para uma função de substituição (permitindo opções de formatação mais avançadas, discutidas em tutoriais mais avançados).

Reformatando Strings JSON usando JSON.stringify() e JSON.parse()

Para strings JSON mal formatadas (por exemplo, de uma única linha), combine JSON.parse() e JSON.stringify() para reformatação.

Exemplo de uma string JSON não formatada:

const unformattedJson = '{"name":"Jane Doe","age":25,"city":"New York"}';

Primeiro, analise a string em um objeto JavaScript:

const jsonObject = JSON.parse(unformattedJson);

Em seguida, formate o objeto de volta para uma string JSON usando JSON.stringify():

const formattedJson = JSON.stringify(jsonObject, null, 4); // 4 espaços para indentação
console.log(formattedJson);

Resultado:

{
    "name": "Jane Doe",
    "age": 25,
    "city": "New York"
}

Este processo de duas etapas limpa efetivamente o JSON mal formatado. Sempre trate potenciais erros de JSON.parse() (usando um bloco try...catch) para evitar travamentos inesperados do aplicativo.

Em resumo, JSON.stringify(), com ou sem JSON.parse(), oferece uma maneira simples de formatar dados JSON em JavaScript, melhorando significativamente a legibilidade do código.