Trabajar con JSON

El formato JSON (JavaScript Object Notation) es el lenguaje universal del intercambio de datos en la web. Cuando una página pide información a un servidor, cuando se guarda una configuración en el navegador o cuando dos servicios se comunican, lo más probable es que lo hagan a través de JSON.

JavaScript incluye de forma nativa el objeto global JSON, con dos métodos que cubren prácticamente todas las situaciones: JSON.parse para convertir texto JSON en un objeto y JSON.stringify para el proceso inverso.

JSON es sólo texto. Un archivo JSON o la respuesta de una API son cadenas de caracteres que siguen una sintaxis concreta. Para trabajar con esos datos en JavaScript hay que convertirlos a objetos y viceversa.

Qué es JSON

JSON se parece mucho a la notación de objetos de JavaScript, pero con algunas reglas más estrictas que hay que conocer.

Un JSON válido es una cadena de texto que puede representar:

• 1. Objetos: delimitados por llaves {}, con pares clave-valor.
• 2. Arrays: delimitados por corchetes [], con valores separados por comas.
• 3. Valores primitivos: cadenas entre comillas dobles, números, true, false o null.

{
    "nombre": "Ana",
    "edad": 30,
    "activo": true,
    "hobbies": ["leer", "correr"],
    "direccion": {
        "ciudad": "Madrid",
        "codigoPostal": "28001"
    }
}

Reglas estrictas de JSON

Aunque la sintaxis se parece a JavaScript, JSON tiene restricciones importantes:

• Las claves deben ir siempre entre comillas dobles: "nombre", nunca nombre ni 'nombre'.
• Las cadenas sólo aceptan comillas dobles, no simples.
• No admite comentarios, ni // ni /* */.
• No admite valores como undefined, funciones, NaN o Infinity.
• No admite comas sobrantes al final de un array u objeto.

Estas reglas hacen que JSON sea un formato predecible y compatible con cualquier lenguaje de programación.

JSON.parse: de texto a objeto

El método JSON.parse recibe una cadena de texto con formato JSON y devuelve el valor JavaScript equivalente.

const textoJson = '{"nombre":"Ana","edad":30,"activo":true}';

const persona = JSON.parse(textoJson);
console.log(persona.nombre); // "Ana"
console.log(persona.edad + 5); // 35

Una vez convertido, persona es un objeto JavaScript normal. Puedes acceder a sus propiedades, modificarlas y usarlo como cualquier otro objeto.

Conversión de arrays

JSON.parse también funciona con arrays y estructuras anidadas:

const textoProductos = '[{"id":1,"nombre":"Portatil"},{"id":2,"nombre":"Raton"}]';
const productos = JSON.parse(textoProductos);

console.log(productos.length); // 2
console.log(productos[0].nombre); // "Portatil"

productos.forEach(producto => {
    console.log(`${producto.id}: ${producto.nombre}`);
});

Errores al parsear

Si la cadena no es un JSON válido, JSON.parse lanza una excepción SyntaxError. Por eso es habitual envolverlo en un bloque try...catch cuando el texto proviene de una fuente externa:

function parsearSeguro(texto) {
    try {
        return JSON.parse(texto);
    } catch (error) {
        console.error("JSON invalido:", error.message);
        return null;
    }
}

console.log(parsearSeguro('{"ok":true}')); // { ok: true }
console.log(parsearSeguro('{"ok":true,}')); // null (coma sobrante)

JSON.stringify: de objeto a texto

El proceso inverso es igual de sencillo. JSON.stringify recibe un valor JavaScript y devuelve su representación como cadena JSON.

const pedido = {
    id: 42,
    cliente: "Luis",
    items: ["camiseta", "pantalon"],
    total: 75.50
};

const texto = JSON.stringify(pedido);
console.log(texto);
// '{"id":42,"cliente":"Luis","items":["camiseta","pantalon"],"total":75.5}'

El resultado es una cadena sin espacios ni saltos de línea, perfecta para enviarla por la red o guardarla en un almacén de datos.

Formateo legible

Si el objetivo es mostrar el JSON en pantalla o guardarlo en un fichero donde tenga que leerse, se puede pasar un tercer argumento con el número de espacios de indentación:

const pedido = { id: 42, cliente: "Luis", total: 75.5 };

const textoLegible = JSON.stringify(pedido, null, 4);
console.log(textoLegible);

El resultado tiene formato:

{
    "id": 42,
    "cliente": "Luis",
    "total": 75.5
}

Es muy útil para depurar y para generar archivos de configuración.

Valores especiales

JSON.stringify omite determinados valores que no tienen representación en JSON:

const ejemplo = {
    nombre: "Ana",
    edad: undefined,
    saludar: function() { return "hola"; },
    fecha: new Date(),
    pendiente: null
};

console.log(JSON.stringify(ejemplo));
// '{"nombre":"Ana","fecha":"2026-04-17T10:30:00.000Z","pendiente":null}'

Las propiedades undefined y las funciones desaparecen. Los null se conservan. Los objetos Date se convierten a cadena ISO. Conocer este comportamiento evita sorpresas al enviar datos al servidor.

Casos de uso habituales

Los métodos JSON.parse y JSON.stringify aparecen constantemente en el desarrollo web. Veamos los dos contextos más frecuentes.

Almacenamiento en localStorage

El almacenamiento local del navegador sólo guarda cadenas de texto. Para guardar un objeto hay que serializarlo y para leerlo hay que parsearlo:

const configuracion = {
    tema: "oscuro",
    idioma: "es",
    notificaciones: true
};

localStorage.setItem("config", JSON.stringify(configuracion));

const guardada = JSON.parse(localStorage.getItem("config"));
console.log(guardada.tema); // "oscuro"

Este patrón permite persistir el estado de una aplicación entre sesiones del navegador.

Comunicación con APIs

Al enviar datos a un servidor con fetch, el cuerpo de la petición debe ser texto. Se usa JSON.stringify para preparar el cuerpo y JSON.parse (de forma automática con respuesta.json()) al recibir la respuesta:

async function crearUsuario(usuario) {
    const respuesta = await fetch("https://api.example.com/users", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(usuario)
    });

    const creado = await respuesta.json();
    return creado;
}

crearUsuario({ nombre: "Ana", email: "ana@example.com" });

El método .json() del objeto Response hace internamente un JSON.parse sobre el cuerpo de la respuesta.

Copia profunda de objetos

Existe un truco clásico para clonar un objeto sin referencias compartidas: convertirlo a JSON y parsearlo de nuevo.

const original = {
    nombre: "Ana",
    direccion: { ciudad: "Madrid" }
};

const copia = JSON.parse(JSON.stringify(original));
copia.direccion.ciudad = "Valencia";

console.log(original.direccion.ciudad); // "Madrid" (no cambia)
console.log(copia.direccion.ciudad); // "Valencia"

Este truco funciona bien para datos planos, aunque tiene limitaciones con fechas, funciones o referencias circulares. En esos casos conviene usar el método moderno structuredClone(objeto).

En resumen: si trabajas con JavaScript y tienes que enviar, recibir o almacenar datos, JSON.parse y JSON.stringify van a acompañarte en prácticamente todos los proyectos.