Cómo mostrar JSON de forma bonita en JavaScript: guía completa

Introducción: ¿Por qué el JSON parece un batido y cómo solucionarlo?

¿Alguna vez has abierto la consola del navegador, has visto una línea kilométrica sin un solo espacio y has pensado: «¿Dónde está el error?»? Es un clásico del género. JSON es un lenguaje universal de intercambio de datos, pero en bruto se lee más o menos como las instrucciones de un microondas en japonés. Especialmente cuando hay muchos datos: objetos anidados, arrays, cadenas largas.

Afortunadamente, en JavaScript hay herramientas integradas que convierten ese «batido» en una belleza ordenada y estructurada. El proceso se llama pretty-print JSON (o «formateo bonito»). En este artículo, analizaremos todas las formas: desde el básico JSON.stringify hasta soluciones personalizadas avanzadas. Aprenderás no solo a leer JSON, sino a hacerlo con comodidad.

El artículo está escrito para pythonlib.ru, un recurso educativo donde nos encantan las explicaciones claras y los ejemplos vivos. ¡Allá vamos!

¿Qué es el pretty-print JSON y para qué sirve?

Pretty-print (o prettify) es el proceso de formatear datos estructurados (JSON, XML, YAML) con sangrías, saltos de línea y alineación. Visualmente, se ve como un código bien formateado, no como una larga línea única.

¿Para qué sirve?

\n
• Depuración (debugging). Ves la estructura del objeto: dónde están las claves, los objetos anidados, los arrays.
\n
• Lectura de logs. En la consola del navegador o en logs del servidor, el JSON formateado salva la vista.
\n
• Documentación. Los ejemplos de JSON en la documentación siempre están en pretty-print.
\n
• Aprendizaje. A los principiantes les resulta más fácil entender la estructura de datos cuando está dividida en niveles.
\n

En JavaScript, hay dos formas principales de obtener un JSON bonito: el integrado JSON.stringify y bibliotecas de terceros (por ejemplo, pretty-js). Pero empecemos por lo básico.

Método 1: JSON.stringify() con parámetros (el más popular)

Seguramente conoces el método JSON.stringify(). Convierte un objeto en una cadena JSON. Pero tiene un segundo y tercer parámetros que hacen maravillas.

Sintaxis

JSON.stringify(value, replacer, space)

\n
• value — tu objeto o array.
\n
• replacer — una función o array para filtrar claves (a menudo null).
\n
• space — la cantidad de espacios para la sangría (o una cadena, por ejemplo "\\t" para tabulación).
\n

Ejemplo 1: Pretty-print básico con espacios

const user = {\n  name: "Alexéi",\n  age: 30,\n  skills: ["JavaScript", "Python", "SQL"],\n  address: {\n    city: "Moscú",\n    zip: 101000\n  }\n};\n\n// Sin formato — una sola línea\nconsole.log(JSON.stringify(user));\n// {"name":"Alexéi","age":30,"skills":["JavaScript","Python","SQL"],"address":{"city":"Moscú","zip":101000}}\n\n// Con formato — ¡hermoso!\nconsole.log(JSON.stringify(user, null, 2));\n

Resultado en la consola:

{\n  "name": "Alexéi",\n  "age": 30,\n  "skills": [\n    "JavaScript",\n    "Python",\n    "SQL"\n  ],\n  "address": {\n    "city": "Moscú",\n    "zip": 101000\n  }\n}\n

Observa: las sangrías de 2 espacios hicieron la estructura legible. Puedes usar 4 espacios o tabulación ("\\t").

Ejemplo 2: Uso de replacer para filtrar

A veces es necesario mostrar solo una parte de los datos. El segundo parámetro replacer puede ser un array de claves.

const filtered = JSON.stringify(user, ["name", "skills"], 2);\nconsole.log(filtered);\n// {\n//   "name": "Alexéi",\n//   "skills": [\n//     "JavaScript",\n//     "Python",\n//     "SQL"\n//   ]\n// }\n

O una función:

const replacerFunc = (key, value) => {\n  if (key === "age") return undefined; // excluimos