Formateador JSON: Embellecer y Validar JSON en Línea Gratis

¿Qué es un formateador JSON?

Un formateador JSON es una herramienta que toma texto JSON y lo reescribe con sangría y saltos de línea, sin cambiar los datos. JSON (JavaScript Object Notation) es un formato de texto plano para almacenar y enviar datos estructurados, compuesto por pares nombre/valor y listas. Los programas suelen ahorrar espacio eliminando todos los espacios en blanco adicionales, lo que produce una sola línea densa y difícil de leer. Un formateador, también llamado embellecedor o formateador legible, vuelve a añadir esos espacios en blanco de manera uniforme para que la estructura sea visible. Esta herramienta formatea el JSON automáticamente mientras se escribe o se pega. No hay ningún botón de formato: la salida se actualiza con cada pulsación de tecla. Un botón de restablecimiento borra la entrada y un botón de copia copia el resultado formateado.

Reglas de sintaxis de JSON

JSON está definido por una especificación llamada RFC 8259. Tiene dos tipos de contenedores:

Los objetos contienen pares nombre/valor entre llaves:

Las matrices contienen listas ordenadas entre corchetes:

Un valor en JSON debe ser de uno de seis tipos: una cadena, un número, un booleano (true o false), null, un objeto o una matriz.

Algunas reglas causan la mayoría de los errores:

• Los nombres de las propiedades deben estar entre comillas dobles. {name: "John"} no es válido; debe ser {"name": "John"}.
• Las cadenas deben usar comillas dobles, no comillas simples.
• No puede haber una coma después del último elemento de un objeto o una matriz (no se permiten comas finales).
• JSON no tiene sintaxis para comentarios, aunque su aspecto de llaves y corchetes provenga de JavaScript.
• JSON no tiene undefined. Se debe usar null para un valor ausente.

Un error frecuente consiste en pegar un literal de objeto de JavaScript en lugar de JSON. {name: 'John', age: undefined} es JavaScript válido, pero no JSON válido. La versión en JSON es {"name": "John", "age": null}.

Cómo funciona este formateador JSON

Muchos formateadores JSON pasan el texto por JSON.parse() para crear un objeto JavaScript y después ejecutan JSON.stringify() para convertirlo de nuevo en texto con espacios. Ese recorrido tiene un efecto secundario: los números de JavaScript son valores de coma flotante de doble precisión IEEE 754, que no pueden representar exactamente todos los enteros una vez que superan 2^53 − 1 (9.007.199.254.740.991). Un identificador como 9007199254740993 puede convertirse en 9007199254740992 después de ese recorrido.

Esta herramienta evita ese paso. Lee la entrada carácter por carácter mediante un pequeño analizador escrito específicamente para este fin y, en lugar de convertir cada número o cadena en un valor de JavaScript, copia ese fragmento de texto exactamente como se escribió y después lo coloca en el nivel de sangría correcto. Como los números nunca se convierten en valores de coma flotante, los enteros de cualquier tamaño conservan sus dígitos exactos. Si un objeto tiene la misma clave escrita dos veces, se conservan ambas copias en su posición, en lugar de combinarlas dejando solo la última, que es lo que ocurriría al crear un objeto JavaScript.

El proceso, paso a paso:

1. Lee el siguiente token (un objeto, una matriz, una cadena, un número, true, false o null).
2. Lo comprueba según la gramática de JSON. Lo rechaza si infringe una regla, como una clave sin comillas o una coma final.
3. Copia el texto del token sin cambios en la salida.
4. Añade un salto de línea y aplica una sangría de 2 espacios por cada nivel de anidamiento dentro de un objeto o una matriz. Un objeto o una matriz vacíos permanecen en una sola línea, como {} o [].
5. Repite el proceso hasta leer toda la entrada.

La sangría está fijada en 2 espacios; no hay ninguna opción para cambiarla. Mientras el cuadro de entrada está vacío, el panel de salida muestra el texto de marcador de posición «El JSON formateado aparecerá aquí automáticamente...». Si la entrada infringe una regla de JSON, la herramienta muestra el mensaje «JSON no válido: comprueba la entrada», en lugar de un mensaje técnico del analizador con la posición exacta del carácter. En cambio, el JSON.parse() integrado en los navegadores sí indica la posición del carácter en el texto del error.

Ejemplo paso a paso

Esta entrada minimizada:

se convierte en:

Cada objeto o matriz anidada tiene un nivel de sangría más que su elemento principal, por lo que la relación entre address y sus tres campos se ve de inmediato.

Un segundo ejemplo muestra por qué es importante copiar los literales. Esta entrada:

se formatea así:

Los dígitos permanecen exactamente como se escribieron. Un formateador basado en JSON.parse() seguido de JSON.stringify() convertiría silenciosamente ese número en 9007199254740992.

Errores frecuentes de JSON

• Nombre de propiedad sin comillas: {name: "John"}. Solución: {"name": "John"}.
• Coma final: {"age": 30,}. Solución: eliminar la coma anterior a la llave de cierre.
• Corchetes que no coinciden: {"data": [1, 2}. Solución: cerrar la matriz con ] antes de cerrar el objeto.
• Cadena sin cerrar: {"name": "John}. Solución: añadir las comillas de cierre que faltan.
• Comillas simples: {'name': 'John'}. Solución: usar comillas dobles.
• undefined, NaN o Infinity: ninguno de estos valores es válido en JSON. Se debe usar null o una cadena.

Una fuente habitual de estos errores es copiar un objeto directamente desde la consola del navegador o desde un registro del servidor, que a menudo incluye sintaxis exclusiva de JavaScript y requiere una limpieza antes de ser JSON válido.

Cuándo usar un formateador JSON

Los formateadores JSON se utilizan sobre todo para inspeccionar respuestas de API, que normalmente se envían minimizadas para ahorrar ancho de banda. También se usan para revisar manualmente archivos de configuración como package.json o composer.json, leer datos copiados del almacenamiento local o de la consola de un navegador y comprender la estructura de un conjunto de datos recibido de otro sistema.

Otras formas de formatear JSON

• Herramientas de desarrollo del navegador: Chrome, Edge y Firefox formatean automáticamente las respuestas JSON en el panel de vista previa de la pestaña Red.
• Editores de código: Visual Studio Code formatea un archivo JSON abierto con Alt+Shift+F (Shift+Option+F en Mac). La mayoría de los editores tienen un atajo equivalente o una extensión de formateo.
• Línea de comandos: jq (jq . file.json) y el comando integrado de Python python -m json.tool file.json formatean JSON desde un terminal.

Cómo integrar el formateo JSON en el código

La mayoría de los lenguajes de programación incluyen una biblioteca JSON con una opción de sangría. En JavaScript:

En Python:

Ambos métodos analizan el texto para convertirlo en una estructura de datos nativa y después lo vuelven a serializar con espacios. Es sencillo escribirlos, pero pueden cambiar los números. JavaScript almacena todos los números como valores de doble precisión, por lo que 9007199254740993 vuelve como 9007199254740992. Python conserva exactos los números enteros, porque sus enteros no tienen límite de tamaño, pero aun así reescribe 1.0e2 como 100.0 y convierte 1e999 en Infinity, que no es un valor JSON válido. Las aplicaciones que necesitan conservar enteros grandes exactos, como los identificadores de bases de datos, suelen almacenarlos como cadenas en JSON en lugar de como números.

Breve historia de JSON

Douglas Crockford especificó JSON a principios de la década de 2000. Tomó su sintaxis de los literales de objeto de JavaScript, pero lo hizo utilizable desde cualquier lenguaje. RFC 4627 lo formalizó en 2006. Se extendió rápidamente porque era más corto de escribir que XML y se correspondía directamente con los objetos de JavaScript, algo importante cuando las aplicaciones web comenzaron a obtener datos en segundo plano en lugar de recargar páginas completas. Para la década de 2010 se había convertido en el formato predeterminado para las API REST y para bases de datos como MongoDB.

Preguntas frecuentes

¿Qué es un formateador JSON?
Es una herramienta que añade sangría, saltos de línea y espacios al texto JSON para que su estructura sea fácil de leer, sin cambiar los datos.

¿El formateo cambia los datos?
No. El formateo solo cambia los espacios en blanco. Esta herramienta copia cada cadena y número exactamente como se escribieron, por lo que los valores de la salida formateada coinciden con precisión con los de la entrada, incluidos los números demasiado grandes para almacenarse exactamente como un número de JavaScript.

¿Por qué aparece el error «JSON no válido»?
La entrada infringe una regla de JSON. Las causas habituales son nombres de propiedades sin comillas, una coma final, comillas simples, una cadena sin cerrar o corchetes que no coinciden. Esta herramienta no muestra la posición exacta del carácter problemático; comprobar la entrada según las reglas anteriores suele permitir encontrarlo rápidamente.

¿Puede JSON contener comentarios?
No. La especificación no los permite. Formatos como JSONC y JSON5 añaden compatibilidad con comentarios sobre la sintaxis de JSON para casos en los que resulta útil, como los archivos de configuración.

¿Cuál es la sangría estándar de JSON?
Dos espacios es la convención más común en el desarrollo web y es lo que utiliza esta herramienta. Algunas guías de estilo usan cuatro espacios o tabuladores; la especificación JSON no exige una sangría concreta.

¿Cuál es la diferencia entre JSON.parse() y JSON.stringify()?
JSON.parse() convierte una cadena JSON en un valor de JavaScript. JSON.stringify() hace lo contrario: convierte un valor de JavaScript en una cadena JSON y acepta un argumento de sangría para mostrarla con un formato legible. Esta herramienta no utiliza ninguna de las dos funciones internamente, lo que le permite conservar exactamente los enteros grandes.

Referencias

1. RFC 8259 — Formato de intercambio de datos JavaScript Object Notation (JSON)
2. MDN Web Docs: JSON
3. json.org