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

¿Qué es un formateador de JSON?

Un formateador de JSON es una herramienta que toma texto en JSON (JavaScript Object Notation) y lo reescribe con sangrías y saltos de línea, sin cambiar los datos. JSON es un formato de texto sin formato para almacenar y enviar datos estructurados, construido con pares nombre/valor y listas. Los programas suelen ahorrar espacio eliminando todos los espacios en blanco sobrantes, lo que produce una sola línea densa y difícil de leer para una persona. Un formateador, también llamado embellecedor o «pretty printer», vuelve a añadir ese espacio en blanco de forma coherente para que se vea la estructura. Esta herramienta da formato al JSON automáticamente mientras se escribe o se pega, sin botones que pulsar.

Reglas de sintaxis de JSON

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

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 de texto, un número, un booleano (true o false), null, un objeto o una matriz.

Unas pocas reglas causan la mayoría de los errores:

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

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

Cómo funciona este formateador JSON

Muchos formateadores de JSON pasan el texto por JSON.parse() para construir un objeto de JavaScript y luego ejecutan JSON.stringify() para convertirlo de nuevo en texto con espaciado. Ese ciclo tiene un efecto secundario: los números de JavaScript son números 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 salir como 9007199254740992 después de ese ciclo.

Esta herramienta evita ese paso. Lee la entrada carácter por carácter con un pequeño analizador sintáctico escrito a mano y, en lugar de convertir cada número o cadena en un valor de JavaScript, copia ese fragmento de texto exactamente como está escrito y lo coloca en el nivel de sangría correcto. Como los números nunca se convierten a 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 lugar en vez de reducirse a la última, que es lo que ocurriría al construir un objeto de JavaScript.

El proceso, paso a paso:

1. Leer el siguiente token (un objeto, una matriz, una cadena, un número, true, false o null).
2. Comprobarlo con la gramática de JSON. Rechazarlo si incumple una regla, como una clave sin comillas o una coma final.
3. Copiar el texto del token sin cambios en la salida.
4. Añadir un salto de línea y una sangría de 2 espacios por cada nivel de anidamiento dentro de un objeto o una matriz.
5. Repetir hasta haber leído toda la entrada.

La sangría es fija, de 2 espacios; no hay ningún ajuste para cambiarla. Si la entrada está vacía, no se muestra nada. Si la entrada incumple una regla de JSON, la herramienta muestra el mensaje «Invalid JSON: Please check your input» en lugar de un mensaje técnico del analizador con la posición exacta del carácter. El JSON.parse() integrado en los navegadores, en cambio, sí indica la posición de un carácter en el texto de su error.

Ejemplo práctico

Esta entrada minificada:

se convierte en:

Cada objeto o matriz anidado lleva un nivel más de sangría que su padre, de modo que la relación entre address y sus tres campos se ve de un vistazo.

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

se formatea así:

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

Errores comunes de JSON

• Nombre de propiedad sin comillas: {name: "John"}. Solución: {"name": "John"}.
• Coma final: {"age": 30,}. Solución: eliminar la coma antes de 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 es un valor válido en JSON. Se usa null o una cadena de texto.

Una fuente frecuente de estos errores es copiar un objeto directamente de la consola de un navegador o de un registro del servidor, que a menudo incluye sintaxis exclusiva de JavaScript que hay que limpiar antes de que sea JSON válido.

Cuándo usar un formateador de JSON

Los formateadores de JSON se usan sobre todo para inspeccionar respuestas de API, que suelen enviarse minificadas para ahorrar ancho de banda. También se usan para revisar a mano archivos de configuración como package.json o tsconfig.json, para leer datos copiados del almacenamiento local o de la consola de un navegador y para entender la estructura de un conjunto de datos recibido de otro sistema.

Otras formas de formatear JSON

• Herramientas para desarrolladores 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 Mayús+Alt+F en Windows, Mayús+Opción+F en Mac o Ctrl+Mayús+I en Linux. La mayoría de los editores tienen un atajo equivalente o una extensión de formato.
• Línea de comandos: jq (jq . file.json) y el módulo python -m json.tool file.json integrado en Python dan formato a JSON desde un terminal.

Cómo integrar el formato de JSON en el código

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

En Python:

Ambos enfoques analizan el texto para obtener una estructura de datos nativa y luego lo vuelven a serializar con espaciado. Como se ha visto, esto es sencillo de escribir, pero puede alterar enteros grandes, porque ambos lenguajes almacenan por defecto los números como valores de coma flotante de doble precisión. Las aplicaciones que necesitan enteros grandes exactos, como los identificadores de bases de datos, suelen almacenarlos como cadenas de texto en JSON y no como números.

Breve historia de JSON

Douglas Crockford especificó JSON a principios de la década de 2000, tomando su sintaxis de los literales de objeto de JavaScript pero haciéndolo utilizable desde cualquier lenguaje. El 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 que importó cuando las aplicaciones web empezaron a obtener datos en segundo plano en lugar de recargar páginas enteras. En la década de 2010 ya era de uso generalizado en las API web.

Preguntas frecuentes

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

¿Cambia el formato los datos? No. El formato solo cambia el espacio en blanco. Esta herramienta copia cada cadena y cada número exactamente como se escribió, de modo que los valores de la salida formateada coinciden con la entrada con precisión, incluidos los números demasiado grandes para almacenarse exactamente como número de JavaScript.

¿Por qué aparece el error «Invalid JSON»? La entrada incumple una regla de JSON. Las causas habituales son nombres de propiedad sin comillas, una coma final, comillas simples, una cadena sin cerrar o un corchete que no coincide. Esta herramienta no muestra la posición exacta del problema; comprobar la entrada con las reglas indicadas arriba suele permitir encontrarlo rápidamente.

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

¿Cuál es la sangría estándar de JSON? Dos espacios es una convención habitual y es la que usa esta herramienta. Algunas guías de estilo usan cuatro espacios o tabulaciones; la propia especificación de JSON no exige ninguna sangría concreta.

¿Qué diferencia hay 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 darle formato legible. Esta herramienta no usa ninguna de las dos funciones internamente, lo que le permite conservar exactamente los enteros grandes.

Referencias

1. Internet Engineering Task Force. RFC 8259: The JavaScript Object Notation (JSON) Data Interchange Format. RFC 8259 — un valor JSON es un objeto, una matriz, un número, una cadena, true, false o null; entre los tokens solo se permite espacio en blanco.
2. Mozilla Developer Network. JSON.parse(). Referencia de JSON.parse() — las matrices y los objetos no pueden tener comas finales; el mensaje de error indica una posición.
3. Mozilla Developer Network. Number.MAX_SAFE_INTEGER. Referencia de Number.MAX_SAFE_INTEGER — el mayor entero seguro es 2^53 − 1 = 9,007,199,254,740,991.
4. Internet Engineering Task Force. RFC 4627: The application/json Media Type for JavaScript Object Notation (JSON). RFC 4627 — primer RFC de JSON, de D. Crockford, julio de 2006.
5. Microsoft. Editing JSON with Visual Studio Code. Documentación de JSON en VS Code — el atajo de Dar formato al documento en cada plataforma.
6. Python Software Foundation. json — JSON encoder and decoder. Documentación de json en Python — python -m json.tool da formato legible a JSON desde la línea de comandos.