Guia Practica de JSON Formatter & Validator

"Esta respuesta de API... no puedo entender donde esta nada."

Has recibido alguna vez una respuesta JSON comprimida en una sola linea? Encontrar un campo especifico en un objeto anidado de 3,000 caracteres es una pesadilla.

JSON Formatter resuelve este problema. Y Validator responde a la pregunta "Por que no se puede parsear?"

---

Repaso de JSON en 30 Segundos

Tipos de Datos

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

Reglas Fundamentales (Errores Comunes)

---

Minificado vs Formateado

Respuesta Real de API (Minificada)

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

Puedes leer esto?

Despues del Formatter (Formateado)

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

La estructura es visible. Puedes identificar inmediatamente donde esta users[0].profile.bio.

---

5 Errores Comunes de JSON

1. Trailing Comma (Coma Final)

El error mas comun. Permitido en JavaScript, pero es un error en JSON.

// Error: Unexpected token }
{
  "name": "Juan Garcia",
  "age": 30,
}

// Corregido
{
  "name": "Juan Garcia",
  "age": 30
}

2. Comillas Simples

// Error: Unexpected token '
{'name': 'Juan Garcia'}

// Corregido
{"name": "Juan Garcia"}

3. Claves sin Comillas

// Error: Unexpected token n
{name: "Juan Garcia"}

// Corregido
{"name": "Juan Garcia"}

4. Caracteres sin Escapar

// Error: saltos de linea, tabulaciones, etc.
{"message": "Hola
Mundo"}

// Corregido
{"message": "Hola\nMundo"}

5. Formato de Numero Invalido

// Error
{"value": 007}       // ceros iniciales
{"hex": 0xFF}        // hexadecimal

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

---

Practica: Formateo en Codigo

JavaScript

// Depurar respuestas de API
fetch('/api/users')
  .then(res => res.json())
  .then(data => {
    // Facil de leer en consola
    console.log(JSON.stringify(data, null, 2));
  });

El tercer argumento de JSON.stringify(data, null, 2):

• 2: indentacion de 2 espacios
• 4: indentacion de 4 espacios
• '\t': indentacion con tabulacion

Extraer Campos Especificos

const user = {
  id: 1,
  name: "Juan Garcia",
  password: "secret123",
  email: "juan@dev.com"
};

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

Salida:

{
  "id": 1,
  "name": "Juan Garcia",
  "email": "juan@dev.com"
}

---

Trabajando con JSON en Linea de Comandos

jq - La Navaja Suiza para JSON

# Instalacion
brew install jq      # macOS
apt install jq       # Ubuntu

# Formateo
cat response.json | jq .

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

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

# Seleccionar campos en nuevo objeto
cat response.json | jq '.users[] | {name, email}'

Python

# Validar + formatear archivo
python -m json.tool data.json

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

Node.js

# Verificar si el archivo es JSON valido
node -e "require('./data.json')"

---

Validacion de Estructura con JSON Schema

Mas alla de la verificacion de sintaxis, puedes validar estructura de datos y tipos.

Definicion del 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
    }
  }
}

Validacion en 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: "Juan Garcia",
  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' }
  // ]
}

---

Configuracion de IDE/Editor

VSCode

# Atajo de formateo automatico
Windows/Linux: Shift + Alt + F
Mac: Shift + Option + F

# Formateo automatico al guardar (settings.json)
"[json]": {
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

JetBrains (IntelliJ, WebStorm)

# Formateo automatico
Windows/Linux: Ctrl + Alt + L
Mac: Cmd + Option + L

---

FAQ

Q: Quiero agregar comentarios a JSON

A: JSON estandar no soporta comentarios. Alternativas:

1. JSONC (JSON with Comments): Usado en archivos de configuracion de VSCode, etc.
2. JSON5: Permite comentarios, comas finales, comillas simples
3. Campo separado: "_comment": "descripcion"

{
  "_comment": "Esta configuracion es para desarrollo",
  "debug": true
}

Q: Mi archivo JSON grande no abre

A: Editores normales se congelan con archivos de decenas de MB. Alternativas:

• jq: Procesamiento en streaming
• fx: Visor interactivo de terminal (npm i -g fx)
• Herramientas online: Visores de JSON grandes dedicados

Q: Puedo registrar toda la respuesta de API?

A: Es peligroso en produccion.

// Incorrecto: Puede exponer datos sensibles
console.log(JSON.stringify(apiResponse));

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

---

Resumen

---

Herramientas Relacionadas