JSON — stringify y parse

Si intentas guardar unos ajustes o el contenido de un carrito en el navegador, o enviarlos a un servidor, verás que un objeto tal cual no sirve: lo único que se puede guardar o transmitir es una cadena.

Si lo conviertes a JSON (un formato de datos para representar pares de clave y valor como una cadena), se puede guardar tal cual, y quien lo recibe puede reconstruir el objeto original. Este artículo trata JSON.stringify, que hace esa conversión, y JSON.parse, que hace el camino inverso.

Convertir un objeto en cadena — JSON.stringify

Si quieres guardar o enviar un objeto, primero tiene que convertirse en una cadena. Si la montas tú mismo con algo como "{" + key + ":" + value + "}", se rompe en cuanto un valor contiene una comilla, de modo que es mejor usar una función que convierta a un formato fijo.

Si escribes JSON.stringify(settings), el objeto se convierte en una cadena de una sola línea que sigue el formato de JSON. Lo que devuelve es una cadena, de ahí que typeof dé "string" y que métodos de cadena como length e includes funcionen directamente sobre ella.

JSON se parece mucho a cómo se escribe JavaScript, pero no es lo mismo. Las claves van siempre entre comillas dobles, y los valores de cadena también usan solo comillas dobles.

No se puede poner una coma final ni incluir comentarios. Justo esa diferencia es la que provoca el SyntaxError que veremos más adelante.

const product = { name: "Café de filtro", price: 780, inStock: true };

const productJson = JSON.stringify(product);
console.log(productJson);
// {"name":"Café de filtro","price":780,"inStock":true}

// Lo que devuelve es una cadena, por eso los métodos de cadena funcionan directamente
console.log(typeof productJson);            // string
console.log(productJson.includes("price")); // true

// Los arrays se convierten igual
console.log(JSON.stringify(["Cocina", "Papelería"]));  // ["Cocina","Papelería"]

Convierte los ajustes de una aplicación en una cadena que se pueda guardar. settings ya está declarado.

① Convierte settings en una cadena JSON y muéstrala.

② Muestra el tipo de lo que obtuviste en ①.

③ Muestra el número de caracteres de lo que obtuviste en ①.

④ Muestra si lo que obtuviste en ① contiene la palabra theme.

(Si se ejecuta correctamente, aparecerá una explicación.)

Hacerlo legible — sangrar con un tercer argumento

Una cadena JSON de una sola línea va bien para transmitir, pero cuesta leerla cuando quieres revisar el contenido a simple vista. Si vas a escribir un archivo de configuración, o a desarrollar comprobando el comportamiento sobre la marcha, se maneja mejor con saltos de línea y sangría.

Si pasas un número como tercer argumento, así: JSON.stringify(order, null, 2), devuelve una cadena de varias líneas sangrada con ese número de espacios. El segundo argumento sirve para elegir qué claves extraer; pásale null para sacarlo todo tal cual.

Aunque esté formateada, lo que devuelve sigue siendo una cadena, de modo que puedes dividirla en líneas con split("\n"). "\n" es la forma de escribir un único salto de línea.

const product = { name: "Café de filtro", price: 780 };

// Pasa 2 como tercer argumento para sangrar con 2 espacios
const pretty = JSON.stringify(product, null, 2);
console.log(pretty);
// {
//   "name": "Café de filtro",
//   "price": 780
// }

// Aunque esté formateado, lo que devuelve es una cadena
console.log(typeof pretty);              // string
console.log(pretty.split("\n").length);  // 4

Escribe un pedido en un formato lo bastante legible como para pegarlo directamente en un archivo de configuración. order ya está declarado.

① Muestra el número de caracteres al convertirlo sin sangría.

② Conviértelo a una forma sangrada con 2 espacios y muéstrala tal cual.

③ Muestra cuántas líneas tiene el resultado de ②.

④ Muestra solo la segunda línea del resultado de ②.

Convertir una cadena de vuelta en objeto — JSON.parse

Una cadena guardada, o recibida de un servidor, no se puede leer tal cual con algo como order.total. Para extraer valores o hacer cálculos con ellos, hay que reconstruir el objeto.

Si escribes JSON.parse(savedJson), el método lee la cadena JSON, construye un objeto y lo devuelve. Los números se recuperan como números y los booleanos como booleanos, de modo que un cálculo como order.total + 1000 funciona sin más.

Los arrays también se recuperan como arrays, por lo que length cuenta sus elementos.

Si le pasas una cadena que no sigue el formato de JSON, se lanza un SyntaxError y la ejecución se detiene en esa línea. Ocurre cuando sobra una coma final, cuando una clave no lleva comillas o cuando la cadena está cortada a medias.

const savedJson = '{"name":"Café de filtro","price":780,"tags":["Cocina"]}';

const product = JSON.parse(savedJson);
console.log(product.name);           // Café de filtro

// Los números se recuperan como números, por eso los cálculos funcionan sin más
console.log(product.price * 2);      // 1560

// Los arrays se recuperan como arrays
console.log(product.tags.length);    // 1
console.log(typeof product);         // object

// Al hacer el viaje de ida y vuelta se obtiene el mismo contenido
console.log(JSON.stringify(product) === savedJson);  // true

Reconstruye, a partir de una cadena de pedido guardada, un objeto con el que puedas trabajar. savedJson ya está declarado.

① Reconstruye el objeto a partir de la cadena y muestra el número de pedido.

② Muestra el total con 1000 sumado.

③ Muestra el número de artículos.

④ Muestra el tipo de lo que has reconstruido.

La cadena que recibes puede llegar rota

Basta con que una conexión se corte a medias, o con que alguien deje una coma de más al editar a mano un archivo de configuración, para que JSON.parse lance un SyntaxError y se detenga en esa línea. Una vez que se detiene, nada de lo que viene después se ejecuta, así que da por hecho que reconstruir un objeto a partir de una cadena que viene de fuera puede fallar.

Cómo escribir código que siga adelante aunque algo falle lo veremos en el artículo de manejo de excepciones.

El código que te damos intenta reconstruir un objeto a partir de una cadena a la que le sobra una coma final. Ejecútalo tal cual y comprueba hasta dónde llega y con qué mensaje se detiene.

Qué se pierde en el viaje — undefined y Date

JSON solo puede representar cadenas, números, booleanos, null, arrays y objetos. Si conviertes un objeto que contiene cualquier otro tipo de valor, ese valor desaparece sin avisar o se sustituye por otra cosa.

Ahí está el origen del desajuste que notas cuando guardas algo y, al leerlo, tiene menos campos que antes.

Al convertir, una propiedad cuyo valor es undefined se elimina junto con su clave. Una propiedad cuyo valor es una función se elimina igual. En cambio, un undefined que esté dentro de un array se sustituye por null, para conservar su posición.

Date (un valor integrado que representa una fecha y una hora; no se trata en este curso) se convierte en una cadena. Sigue siendo una cadena también después de JSON.parse, y no se recupera en una forma que puedas usar como fecha.

Si después necesitas usarlo como fecha, tendrás que volver a crearlo tú mismo con new Date(cadena).

const record = {
  orderId: "ORD-1477",
  couponCode: undefined,
  orderedAt: new Date("2026-09-02T09:00:00Z"),
  tags: ["Cocina", undefined],
};

const json = JSON.stringify(record);
console.log(json);
// {"orderId":"ORD-1477","orderedAt":"2026-09-02T09:00:00.000Z","tags":["Cocina",null]}

const restored = JSON.parse(json);
console.log("couponCode" in restored);   // false (se eliminó con su clave)
console.log(typeof restored.orderedAt);  // string (no se recupera como Date)
console.log(restored.tags[1]);           // null (dentro del array pasó a null)