L64 - JSON

🧠 Concepto

JSON (JavaScript Object Notation) es un formato ligero de intercambio de datos. Aunque su nombre incluye “JavaScript”, es independiente del lenguaje y se usa universalmente en APIs, configuraciones y almacenamiento.

En JavaScript, JSON se maneja con dos métodos estáticos de JSON:

• JSON.stringify() → serializa un objeto JS a string JSON.
• JSON.parse() → deserializa un string JSON a objeto JS.

💻 JSON.stringify()

Convierte un valor JavaScript a su representación JSON (string):

const usuario = {
  nombre: 'Ana',
  edad: 25,
  activo: true,
  hobbies: ['leer', 'correr'],
  direccion: null
};

const json = JSON.stringify(usuario);
console.log(json);
// '{"nombre":"Ana","edad":25,"activo":true,"hobbies":["leer","correr"],"direccion":null}'

Parámetros

JSON.stringify(valor, reemplazante, espacio);

• reemplazante: array o función para filtrar/transformar propiedades.
• espacio: número de espacios para indentación (formateado legible).

// Array de propiedades a incluir
const filtrado = JSON.stringify(usuario, ['nombre', 'edad']);
console.log(filtrado); // '{"nombre":"Ana","edad":25}'

// Función reemplazante (replacer)
const transformado = JSON.stringify(usuario, (key, value) => {
  if (key === 'edad') return undefined; // omite edad
  if (typeof value === 'string') return value.toUpperCase();
  return value;
});
console.log(transformado); // '{"nombre":"ANA","activo":true,...}'

// Con indentación (formato legible)
console.log(JSON.stringify(usuario, null, 2));
/*
{
  "nombre": "Ana",
  "edad": 25,
  ...
}
*/

💻 JSON.parse()

Convierte un string JSON a un objeto JavaScript:

const jsonStr = '{"nombre":"Ana","edad":25,"activo":true}';
const usuario = JSON.parse(jsonStr);

console.log(usuario.nombre); // 'Ana'
console.log(usuario.edad);   // 25

Parámetros

JSON.parse(texto, reviver);

reviver: función que permite transformar los valores durante el parseo:

const jsonFechas = '{"nombre":"Evento","fecha":"2024-12-10T10:00:00.000Z"}';

const evento = JSON.parse(jsonFechas, (key, value) => {
  if (key === 'fecha') return new Date(value);
  return value;
});

console.log(evento.fecha instanceof Date); // true
console.log(evento.fecha.getFullYear());   // 2024

⚠️ Limitaciones de JSON

Lo que NO soporta JSON.stringify()

Tipo	Comportamiento
undefined	Se omite (en objetos) / se convierte a null (en arrays)
Function	Se omite
Symbol	Se omite
Infinity, NaN	Se convierten a null
BigInt	Lanza TypeError
Map, Set	Se serializan como objetos vacíos {}
Circular references	Lanza TypeError

const problema = {
  nombre: 'Test',
  funcion: () => console.log('hola'), // Se omite
  indefinido: undefined,               // Se omite
  simbolo: Symbol('test'),             // Se omite
  infinito: Infinity                   // → null
};

console.log(JSON.stringify(problema));
// '{"nombre":"Test","infinito":null}'

Circular references

const a = { nombre: 'A' };
const b = { nombre: 'B', ref: a };
a.ref = b;

// JSON.stringify(a); // TypeError: Converting circular structure to JSON

Solución: usar librerías como flatted o implementar un reemplazante que lleve registro de objetos visitados.

📝 JSON.stringify personalizado con toJSON()

Los objetos pueden implementar un método toJSON() para controlar cómo se serializan:

const usuario = {
  nombre: 'Ana',
  password: 'secreta123',
  createdAt: new Date('2024-01-15'),
  toJSON() {
    return {
      nombre: this.nombre,
      // "password" se omite intencionadamente
      registrado: this.createdAt.toISOString().split('T')[0]
    };
  }
};

console.log(JSON.stringify(usuario, null, 2));
/*
{
  "nombre": "Ana",
  "registrado": "2024-01-15"
}
*/

🧠 JSON vs Objetos JS

NO son lo mismo. JSON es un formato de texto con reglas más estrictas:

JSON	Objeto JS
Las claves deben llevar comillas dobles	Las claves pueden ir sin comillas
Solo strings, numbers, booleans, null, arrays, objetos	Soporta funciones, undefined, Symbols, Map, Set…
No admite comentarios	Puede tener comentarios (no estándar)
No admite trailing commas	Puede tener trailing commas
Los strings deben usar comillas dobles	Acepta comillas simples o dobles

// ✅ Válido en JS pero NO en JSON
const obj = {
  nombre: 'Ana',
  'apellido': 'García',
  hobbies: ['leer',],  // trailing comma
  saludar() { console.log('Hola'); }
};

// ✅ JSON válido
const jsonStr = '{"nombre":"Ana","apellido":"García","hobbies":["leer"]}';

💻 Almacenar y recuperar datos

El patrón más común con JSON es serializar para guardar y parsear para leer:

// Guardar en localStorage
const preferencias = {
  tema: 'oscuro',
  idioma: 'es',
  notificaciones: true
};

localStorage.setItem('preferencias', JSON.stringify(preferencias));

// Recuperar
const guardado = localStorage.getItem('preferencias');
if (guardado) {
  const preferenciasUsuario = JSON.parse(guardado);
  console.log(preferenciasUsuario.tema); // 'oscuro'
}

try/catch siempre

function safeParse(json) {
  try {
    return { data: JSON.parse(json), error: null };
  } catch (e) {
    return { data: null, error: `JSON inválido: ${e.message}` };
  }
}

const resultado = safeParse('{"invalido"}');
if (resultado.error) {
  console.error(resultado.error);
}

🎯 Regla de oro: siempre envuelve JSON.parse() en un try/catch. Nunca confíes en que el string JSON es válido.