Saltar al contenido
AldeaCode Logo
Formateador JSON / JavaScript Formato 100% local

Formatear JSON en JavaScript: JSON.stringify bien hecho

Todo dev JS ha escrito `JSON.stringify(obj)` y ha enviado una pared de texto sin saltos a un log. El tercer argumento existe, el replacer está infrautilizado y BigInt revienta en runtime sin avisar.

El tercer argumento es lo que quieres

JSON.stringify(value, replacer, space) acepta un tercer argumento que todo el mundo olvida. Pasa 2 y tienes salida bonita. Pasa un string y ese string se vuelve el literal de indent. No pases nada y tienes la pared de texto.

Para debug por consola, el movimiento canónico es console.log(JSON.stringify(obj, null, 2)). Para logs que un backend va a indexar después, quita el indent y usa un structured logger en su lugar.

El replacer no es decoración

El segundo argumento puede ser una función que filtra o transforma cada par clave-valor antes de serializarlo. Dos usos reales:

Ocultar secretos sin mutar el objeto: ``js const safe = JSON.stringify(user, (k, v) => k === "password" || k === "token" ? "[REDACTED]" : v, 2); ``

Pasa un array de claves para incluir solo esas propiedades. Útil cuando recibes un objeto con 30 campos y solo quieres loguear 3.

Las trampas de BigInt y referencias circulares

JSON.stringify no sabe serializar BigInt y lanza TypeError: Do not know how to serialize a BigInt. Convierte a string antes de serializar: v => typeof v === "bigint" ? v.toString() : v dentro del replacer.

Las referencias circulares lanzan Converting circular structure to JSON. O usas util.inspect en Node, o mantienes un Set de valores vistos dentro del replacer para romper el ciclo.

El truncamiento silencioso de localStorage

Los navegadores limitan localStorage a unos 5 MB. JSON.stringify de un objeto profundamente anidado puede pasar ese límite sin avisar. Envuelve tu escritura en un try/catch sobre QuotaExceededError y muestra el fallo en lugar de dejar que el estado vaya a la deriva.

Ejemplo completo

javascript
const user = {
  id: 42,
  name: "Ada",
  password: "p@ssw0rd",
  tags: ["admin", "beta"],
  bigField: 9007199254740993n, // BigInt
};

const formatted = JSON.stringify(
  user,
  (key, value) => {
    if (key === "password") return "[REDACTED]";
    if (typeof value === "bigint") return value.toString();
    return value;
  },
  2,
);

console.log(formatted);

¿Solo necesitas el resultado?

Cuando solo necesitas formatear un blob que cogiste de la pestaña de red, el formateador en el navegador está a un paste de distancia. Valida mientras formatea, marca la línea exacta del error de sintaxis y nunca envía tu payload a ningún sitio.

Abrir Formateador y Validador JSON →

Preguntas frecuentes

¿JSON.stringify conserva el orden de propiedades?

Sí para claves string (orden de inserción). Las claves numéricas se ordenan ascendente primero. Si te importa el determinismo para diffs, pasa un array explícito como replacer para fijar el orden.

¿Cómo parseo y re-serializo en un paso para normalizar?

JSON.stringify(JSON.parse(input), null, 2). El round-trip por parse normaliza whitespace, rarezas de orden y comas finales (que hubieran fallado el parse igualmente).

¿El objeto global JSON está en todos los runtimes JS?

Sí. JSON es parte de ES5 (2009) y está en todas las versiones de Node desde 0.x, todos los navegadores desde IE8 y cualquier runtime JS embebido decente.