📦 JSON y Conversión de Datos

Aprende a trabajar con JSON, el formato más utilizado para intercambiar datos en la web. Descubre cómo convertir entre objetos JavaScript y JSON fácilmente.

1. ¿Qué es JSON?

JSON (JavaScript Object Notation) es un formato de texto ligero para almacenar y transportar datos. Es fácil de leer para humanos y fácil de procesar para máquinas.

Se usa principalmente para enviar datos entre un servidor y un navegador, o para guardar configuraciones y datos en archivos.

💡 ¿Por qué es importante?

✓ Es el estándar para APIs web (REST APIs)
✓ Es independiente del lenguaje (funciona en JavaScript, Python, Java, etc.)
✓ Es ligero y fácil de leer
✓ Se puede guardar en archivos .json

Ejemplo de JSON:

ejemplo.jsonjson

1{
2  "nombre": "Ana García",
3  "edad": 28,
4  "ciudad": "Madrid",
5  "activo": true,
6  "hobbies": ["programación", "senderismo", "lectura"],
7  "direccion": {
8    "calle": "Gran Vía 123",
9    "codigoPostal": "28013"
10  }
11}

2. Sintaxis de JSON

Reglas importantes:

1. Los datos están en pares clave:valor

2. Las claves deben estar entre comillas dobles "nombre"

3. Los valores pueden ser: string, number, boolean, array, object, null

4. Los strings deben usar comillas dobles (no simples)

5. No se permiten comentarios

6. No se permiten funciones ni undefined

❌ JSON inválido

1{
2  nombre: 'Juan',        // ❌ Falta comillas en clave
3  'edad': 30,            // ❌ Comillas simples
4  ciudad: "Madrid",      // ❌ Falta comillas en clave
5  activo: undefined,     // ❌ undefined no es válido
6  saludar: function() {} // ❌ funciones no permitidas
7}

✅ JSON válido

1{
2  "nombre": "Juan",
3  "edad": 30,
4  "ciudad": "Madrid",
5  "activo": true,
6  "hobbies": ["leer", "correr"]
7}

3. JSON.stringify() - De objeto a texto

Convierte un objeto JavaScript en una cadena de texto JSON. Útil para enviar datos a un servidor o guardarlos en localStorage.

Sintaxis básica:

1const objeto = { nombre: 'Luis', edad: 25 };
2 
3// Convertir a JSON (texto)
4const jsonTexto = JSON.stringify(objeto);
5 
6console.log(jsonTexto);
7// Resultado: '{"nombre":"Luis","edad":25}'
8 
9console.log(typeof jsonTexto);
10// Resultado: 'string'

Ejemplo práctico: Enviar datos a un servidor

1const nuevoProducto = {
2  nombre: 'Teclado Mecánico',
3  precio: 89.99,
4  categoria: 'Periféricos',
5  stock: 15
6};
7 
8// Convertir a JSON para enviar
9const productoJSON = JSON.stringify(nuevoProducto);
10 
11console.log('Datos a enviar:', productoJSON);
12// '{"nombre":"Teclado Mecánico","precio":89.99,"categoria":"Periféricos","stock":15}'
13 
14console.log('Tipo:', typeof productoJSON);
15// 'string'
16 
17// Simular envío (luego veremos fetch real)
18console.log('📤 Enviando al servidor...');

Ejemplo: Convertir un array de objetos

1const tareas = [
2  { id: 1, texto: 'Estudiar JavaScript', completada: false },
3  { id: 2, texto: 'Hacer ejercicios', completada: true },
4  { id: 3, texto: 'Practicar JSON', completada: false }
5];
6 
7// Convertir array completo
8const tareasJSON = JSON.stringify(tareas);
9 
10console.log(tareasJSON);
11// '[{"id":1,"texto":"Estudiar JavaScript","completada":false},...'

⚠️ Lo que NO se convierte:

1const objeto = {
2  nombre: 'Pedro',
3  edad: 25,
4  saludar: function() { console.log('Hola'); }, // ❌ Se ignora
5  indefinido: undefined,                          // ❌ Se ignora
6  simbolo: Symbol('id')                           // ❌ Se ignora
7};
8 
9console.log(JSON.stringify(objeto));
10// Resultado: {"nombre":"Pedro","edad":25}
11// Las funciones, undefined y símbolos desaparecen

4. JSON.parse() - De texto a objeto

Convierte una cadena de texto JSON en un objeto JavaScript. Útil para procesar datos recibidos de un servidor o recuperados de localStorage.

Sintaxis básica:

1const jsonTexto = '{"nombre":"Carlos","edad":28}';
2 
3// Convertir a objeto JavaScript
4const objeto = JSON.parse(jsonTexto);
5 
6console.log(objeto);
7// Resultado: { nombre: 'Carlos', edad: 28 }
8 
9console.log(objeto.nombre); // 'Carlos'
10console.log(objeto.edad);   // 28
11 
12console.log(typeof objeto);
13// Resultado: 'object'

Ejemplo práctico: Recuperar de localStorage

1// Recuperar y convertir a objeto
2const usuarioJSON = localStorage.getItem('usuario');
3const usuario = JSON.parse(usuarioJSON);
4 
5console.log('Nombre:', usuario.nombre);
6console.log('Email:', usuario.email);
7console.log('Es premium:', usuario.premium);
8 
9// Ahora puedes trabajar con el objeto normalmente
10if (usuario.premium) {
11  console.log('Acceso completo');
12} else {
13  console.log('Acceso limitado');
14}

Arrays en JSON:

1const productosJSON = '[{"id":1,"nombre":"Laptop"},{"id":2,"nombre":"Mouse"}]';
2 
3// Convertir array JSON a array JavaScript
4const productos = JSON.parse(productosJSON);
5 
6console.log(productos);
7// [{ id: 1, nombre: 'Laptop' }, { id: 2, nombre: 'Mouse' }]
8 
9// Ahora puedes usar métodos de array
10productos.forEach(producto => {
11  console.log(`Producto ${producto.id}: ${producto.nombre}`);
12});

⚠️ Manejo de errores:

Si el JSON es inválido, JSON.parse() lanzará un error. Usa try/catch:

1const jsonInvalido = '{"nombre": "Ana", edad: 30}'; // ❌ Falta comillas
2 
3try {
4  const objeto = JSON.parse(jsonInvalido);
5  console.log(objeto);
6} catch (error) {
7  console.error('Error al parsear JSON:', error.message);
8  // Error al parsear JSON: Unexpected token e in JSON at position 18
9}

5. Casos de uso comunes

💾 Guardar datos en localStorage

1// Guardar carrito de compras
2const carrito = [
3  { id: 1, nombre: 'Laptop', cantidad: 1, precio: 999 },
4  { id: 2, nombre: 'Mouse', cantidad: 2, precio: 25 }
5];
6 
7// Convertir a JSON y guardar
8localStorage.setItem('carrito', JSON.stringify(carrito));
9 
10// Recuperar y convertir de vuelta
11const carritoGuardado = JSON.parse(localStorage.getItem('carrito'));
12 
13console.log(carritoGuardado);
14// [{ id: 1, nombre: 'Laptop', cantidad: 1, precio: 999 }, ...]

🌐 Trabajar con APIs

1// Recibir datos de una API
2fetch('https://api.example.com/usuarios')
3  .then(response => response.json()) // Convierte automáticamente
4  .then(usuarios => {
5    console.log('Usuarios recibidos:', usuarios);
6 
7    usuarios.forEach(usuario => {
8      console.log(`${usuario.nombre} - ${usuario.email}`);
9    });
10  });
11 
12// Enviar datos a una API
13const nuevoUsuario = {
14  nombre: 'Laura',
15  email: 'laura@example.com'
16};
17 
18fetch('https://api.example.com/usuarios', {
19  method: 'POST',
20  headers: {
21    'Content-Type': 'application/json'
22  },
23  body: JSON.stringify(nuevoUsuario) // Convertir a JSON
24});

📋 Clonar objetos (deep copy)

1const original = {
2  nombre: 'Pedro',
3  direccion: {
4    ciudad: 'Barcelona',
5    pais: 'España'
6  }
7};
8 
9// Clonar profundo usando JSON
10const copia = JSON.parse(JSON.stringify(original));
11 
12// Modificar la copia
13copia.direccion.ciudad = 'Madrid';
14 
15console.log(original.direccion.ciudad); // 'Barcelona' (no cambia)
16console.log(copia.direccion.ciudad);    // 'Madrid'
17 
18// ⚠️ Limitación: No funciona con funciones, Date, undefined, etc.

⚙️ Configuración de aplicación

1// Guardar preferencias del usuario
2const configuracion = {
3  tema: 'oscuro',
4  idioma: 'es',
5  notificaciones: true,
6  volumen: 75
7};
8 
9localStorage.setItem('config', JSON.stringify(configuracion));
10 
11// Cargar configuración al iniciar la app
12const config = JSON.parse(localStorage.getItem('config')) || {
13  tema: 'claro',
14  idioma: 'es',
15  notificaciones: false,
16  volumen: 50
17};
18 
19// Aplicar configuración
20document.body.className = config.tema;
21document.documentElement.lang = config.idioma;

📝 Ejercicio práctico

Convertir y mostrar datos

Practica la conversión entre objetos y JSON con este ejercicio simple.

Pasos:

Crea un objeto libro con: título, autor, año, páginas
Convierte el objeto a JSON usando JSON.stringify()
Muestra el JSON en la consola
Convierte de vuelta a objeto usando JSON.parse()
Accede y muestra cada propiedad del objeto

Ver solución

1// 1. Crear objeto
2const libro = {
3  titulo: 'El Quijote',
4  autor: 'Miguel de Cervantes',
5  año: 1605,
6  paginas: 863
7};
8 
9// 2. Convertir a JSON
10const libroJSON = JSON.stringify(libro);
11 
12// 3. Mostrar JSON
13console.log('JSON:', libroJSON);
14// {"titulo":"El Quijote","autor":"Miguel de Cervantes","año":1605,"paginas":863}
15 
16// 4. Convertir de vuelta a objeto
17const libroObjeto = JSON.parse(libroJSON);
18 
19// 5. Acceder a propiedades
20console.log('Título:', libroObjeto.titulo);
21console.log('Autor:', libroObjeto.autor);
22console.log('Año:', libroObjeto.año);
23console.log('Páginas:', libroObjeto.paginas);

💡 Nota: Practicaremos más con JSON cuando veamos Fetch API y llamadas a servidores.

📚 Resumen

JSON.stringify()

• Objeto → Texto JSON
• Para guardar o enviar datos
• JSON.stringify(obj)

JSON.parse()

• Texto JSON → Objeto
• Para procesar datos recibidos
• JSON.parse(text)

Anterior: Ejercicio Integrador Siguiente: Manejo de errores