Lectura y escritura de JSON en JavaScript

JavaScript es el lenguaje nativo de JSON, ya que el formato fue creado inspirado en la notación de objetos de este lenguaje. Por eso, trabajar con JSON en JavaScript es muy sencillo y directo.

¿Cómo maneja JSON JavaScript?

JavaScript provee dos funciones globales para trabajar con JSON:

• JSON.parse() — Convierte un string en formato JSON a un objeto de JavaScript.
• JSON.stringify() — Convierte un objeto de JavaScript a un string en formato JSON.

1. Convertir un JSON a objeto con JSON.parse()

Cuando recibimos datos en formato JSON (por ejemplo, desde una API o archivo externo), vienen como string. Para poder manipularlos en JavaScript, hay que convertirlos a objeto.

Ejemplo:

const jsonString = '{"nombre": "Ana", "edad": 28, "activo": true}';

// Convertimos el string JSON a objeto de JavaScript
const objeto = JSON.parse(jsonString);

console.log(objeto.nombre);  // Ana
console.log(objeto.edad);    // 28
console.log(objeto.activo);  // true

🔎 Observación: Después de JSON.parse(), podemos acceder a los datos como propiedades normales de un objeto.

2. Convertir un objeto a JSON con JSON.stringify()

Cuando queremos enviar datos a un servidor o guardarlos, necesitamos pasarlos a formato JSON.

Ejemplo:

const usuario = {
  nombre: "Luis",
  edad: 35,
  activo: false
};

// Convertimos el objeto a string JSON
const jsonString = JSON.stringify(usuario);

console.log(jsonString);
// {"nombre":"Luis","edad":35,"activo":false}

🔎 Observación: El resultado es un string válido en formato JSON. Este string es lo que viaja en las peticiones HTTP (por ejemplo, en fetch).

3. Ejemplo práctico: Enviar JSON con fetch

En aplicaciones web, lo más común es enviar y recibir JSON de un servidor.

Ejemplo de enviar datos:

const nuevoProducto = {
  codigo: 101,
  descripcion: "Teclado mecánico",
  precio: 1200.50
};

fetch("https://miapi.com/productos", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(nuevoProducto)  // enviamos JSON al servidor
})
  .then(respuesta => respuesta.json()) // interpretamos la respuesta como JSON
  .then(data => console.log("Servidor respondió:", data))
  .catch(error => console.error("Error:", error));

Ejemplo de recibir datos:

fetch("https://miapi.com/productos")
  .then(respuesta => respuesta.json()) // parseamos la respuesta JSON
  .then(data => {
    console.log("Productos disponibles:");
    console.log(data);
  })
  .catch(error => console.error("Error:", error));

4. Ejemplo práctico en navegador (localStorage)

Podemos usar JSON para guardar información del usuario en el navegador.

Ejemplo:

// Guardar un objeto en localStorage
const usuario = { nombre: "María", edad: 29 };
localStorage.setItem("usuario", JSON.stringify(usuario));

// Recuperar y parsear
const datosGuardados = localStorage.getItem("usuario");
const usuarioRecuperado = JSON.parse(datosGuardados);

console.log(usuarioRecuperado.nombre); // María

Referencia: localStorage.

5. Manejo de errores en JSON.parse()

Si el string JSON tiene un error de sintaxis, JSON.parse() lanza una excepción.

Ejemplo:

const jsonInvalido = "{nombre: 'Juan'}"; // incorrecto (faltan comillas dobles)

try {
  const obj = JSON.parse(jsonInvalido);
} catch (error) {
  console.error("Error al parsear JSON:", error.message);
}

6. Formateo y legibilidad con JSON.stringify()

JSON.stringify() admite parámetros extra para formatear con sangría y mejorar la legibilidad.

Ejemplo:

const datos = { nombre: "Carlos", edad: 40 };

const jsonFormateado = JSON.stringify(datos, null, 2);
console.log(jsonFormateado);
// Salida:
// {
//   "nombre": "Carlos",
//   "edad": 40
// }

📊 Resumen

• JSON.parse() — Convierte string JSON a objeto JavaScript.
• JSON.stringify() — Convierte objeto JavaScript a string JSON.
• JSON es el formato estándar de comunicación en fetch (cliente-servidor).
• Se puede usar también en almacenamiento local (localStorage).
• Es importante manejar errores al parsear para evitar fallas en la app.