Guia Pratico de JSON Formatter & Validator

"Esta resposta de API... nao consigo entender onde esta nada."

Voce ja recebeu uma resposta JSON comprimida em uma unica linha? Encontrar um campo especifico em um objeto aninhado de 3.000 caracteres e um pesadelo.

JSON Formatter resolve este problema. E Validator responde a pergunta "Por que nao esta parseando?"

---

Revisao de JSON em 30 Segundos

Tipos de Dados

{
  "string": "texto",
  "number": 42,
  "boolean": true,
  "null": null,
  "array": [1, 2, 3],
  "object": {"nested": "value"}
}

Regras Fundamentais (Erros Comuns)

---

Minificado vs Formatado

Resposta Real da API (Minificada)

{"users":[{"id":1,"name":"Joao Silva","email":"joao@dev.com","profile":{"avatar":"https://cdn.example.com/1.jpg","bio":"Desenvolvedor full-stack"}}],"pagination":{"total":150,"page":1,"limit":10}}

Voce consegue ler isso?

Apos o Formatter (Formatado)

{
  "users": [
    {
      "id": 1,
      "name": "Joao Silva",
      "email": "joao@dev.com",
      "profile": {
        "avatar": "https://cdn.example.com/1.jpg",
        "bio": "Desenvolvedor full-stack"
      }
    }
  ],
  "pagination": {
    "total": 150,
    "page": 1,
    "limit": 10
  }
}

A estrutura fica visivel. Voce pode identificar imediatamente onde esta users[0].profile.bio.

---

5 Erros Comuns de JSON

1. Trailing Comma (Virgula Final)

O erro mais comum. Permitido em JavaScript, mas e um erro em JSON.

// Erro: Unexpected token }
{
  "name": "Joao Silva",
  "age": 30,
}

// Corrigido
{
  "name": "Joao Silva",
  "age": 30
}

2. Aspas Simples

// Erro: Unexpected token '
{'name': 'Joao Silva'}

// Corrigido
{"name": "Joao Silva"}

3. Chaves sem Aspas

// Erro: Unexpected token n
{name: "Joao Silva"}

// Corrigido
{"name": "Joao Silva"}

4. Caracteres nao Escapados

// Erro: quebras de linha, tabs, etc.
{"message": "Ola
Mundo"}

// Corrigido
{"message": "Ola\nMundo"}

5. Formato de Numero Invalido

// Erro
{"value": 007}       // zero inicial
{"hex": 0xFF}        // hexadecimal

// Corrigido
{"value": 7}
{"hex": "0xFF"}      // como string

---

Pratica: Formatacao no Codigo

JavaScript

// Debug de respostas de API
fetch('/api/users')
  .then(res => res.json())
  .then(data => {
    // Facil de ler no console
    console.log(JSON.stringify(data, null, 2));
  });

O terceiro argumento de JSON.stringify(data, null, 2):

• 2: indentacao de 2 espacos
• 4: indentacao de 4 espacos
• '\t': indentacao com tab

Extraindo Campos Especificos

const user = {
  id: 1,
  name: "Joao Silva",
  password: "secret123",
  email: "joao@dev.com"
};

// Saida sem password
console.log(JSON.stringify(user, ['id', 'name', 'email'], 2));

Saida:

{
  "id": 1,
  "name": "Joao Silva",
  "email": "joao@dev.com"
}

---

Trabalhando com JSON na Linha de Comando

jq - O Canivete Suico para JSON

# Instalacao
brew install jq      # macOS
apt install jq       # Ubuntu

# Formatacao
cat response.json | jq .

# Extrair campo especifico
cat response.json | jq '.users[0].name'

# Filtrar arrays
cat response.json | jq '.users[] | select(.age > 30)'

# Selecionar campos em novo objeto
cat response.json | jq '.users[] | {name, email}'

Python

# Validar + formatar arquivo
python -m json.tool data.json

# Processar via pipe
curl https://api.example.com/users | python -m json.tool

Node.js

# Verificar se o arquivo e JSON valido
node -e "require('./data.json')"

---

Validacao de Estrutura com JSON Schema

Alem da verificacao de sintaxe, voce pode validar estrutura de dados e tipos.

Definicao do Schema

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "required": ["name", "email"],
  "properties": {
    "name": {
      "type": "string",
      "minLength": 2,
      "maxLength": 50
    },
    "email": {
      "type": "string",
      "format": "email"
    },
    "age": {
      "type": "integer",
      "minimum": 0,
      "maximum": 150
    }
  }
}

Validacao em JavaScript (ajv)

import Ajv from 'ajv';
import addFormats from 'ajv-formats';

const ajv = new Ajv();
addFormats(ajv);

const validate = ajv.compile(schema);

const data = {
  name: "Joao Silva",
  email: "email-invalido",
  age: -5
};

if (!validate(data)) {
  console.log(validate.errors);
  // [
  //   { keyword: 'format', message: 'must match format "email"' },
  //   { keyword: 'minimum', message: 'must be >= 0' }
  // ]
}

---

Configuracao de IDE/Editor

VSCode

# Atalho de formatacao automatica
Windows/Linux: Shift + Alt + F
Mac: Shift + Option + F

# Formatacao automatica ao salvar (settings.json)
"[json]": {
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

JetBrains (IntelliJ, WebStorm)

# Formatacao automatica
Windows/Linux: Ctrl + Alt + L
Mac: Cmd + Option + L

---

FAQ

Q: Quero adicionar comentarios ao JSON

A: JSON padrao nao suporta comentarios. Alternativas:

1. JSONC (JSON with Comments): Usado em arquivos de configuracao do VSCode, etc.
2. JSON5: Permite comentarios, virgulas finais, aspas simples
3. Campo separado: "_comment": "descricao"

{
  "_comment": "Esta configuracao e para desenvolvimento",
  "debug": true
}

Q: Meu arquivo JSON grande nao abre

A: Editores normais travam com arquivos de dezenas de MB. Alternativas:

• jq: Processamento em streaming
• fx: Visualizador interativo de terminal (npm i -g fx)
• Ferramentas online: Visualizadores de JSON grandes dedicados

Q: Posso logar toda a resposta da API?

A: E perigoso em producao.

// Errado: Pode expor dados sensiveis
console.log(JSON.stringify(apiResponse));

// Correto: Mascarar campos sensiveis
const sanitize = (obj) => JSON.stringify(obj, (key, val) =>
  ['password', 'token', 'secret'].includes(key) ? '***' : val
);

---

Resumo

---

Ferramentas Relacionadas