¿Qué es JSON? (JavaScript Object Notation)

Descubre qué es JSON y para qué sirve en JavaScript. Aprende cómo crear y cómo convertir tus datos de forma eficiente, utilizando JSON.stringify(objeto) para enviar información y JSON.parse(cadena) para recibirla y manipularla. ¡Domina este formato esencial para la comunicación web!

1. ¿Qué es un JSON y relación con JavaScript?

JSON es un formato de texto estándar para representar datos estructurados. Su nombre, JavaScript Object Notation, sugiere que está basado en la notación de objetos de JavaScript, pero es importante entender que JSON es independiente del lenguaje.

Mientras que nació en el ecosistema de JavaScript, hoy en día casi todos los lenguajes de programación (Python, Java, PHP, Ruby, etc.) tienen bibliotecas para leer y escribir JSON.

1.1. ¿Beneficios de usar JSON?

JSON se ha convertido en el formato de intercambio de datos dominante en la web por varias razones:

✅ Es ligero

La sintaxis de JSON es concisa y fácil de leer y escribir tanto para humanos como para máquinas. Esto lo hace ideal para el intercambio rápido de datos.

✅ Es legible

Su estructura se asemeja a un objeto o diccionario, lo que facilita su comprensión. Esto permite que los desarrolladores entiendan su contenido rápidamente.

✅ Es universal

Es compatible con la mayoría de los lenguajes de programación modernos. Esto permite intercambiar datos entre sistemas desarrollados en distintos lenguajes.

✅ Es eficiente

Es más rápido de procesar y tiene un tamaño de archivo más pequeño en comparación con otros formatos como XML, lo que mejora el rendimiento de las APIs y aplicaciones web.

1.2. Sintaxis de JSON: Claves y Valores

JSON se basa enteramente en pares clave/valor, organizados en estructuras llamadas objetos y arreglos.

1.2.1. Pares Clave/Valor:

Un par clave/valor asocia un nombre (la clave) con un dato (el valor).

"clave": "valor",
"nombre": "Carlos",
"edad": 30Lenguaje del código: JavaScript (javascript)

• La clave: Siempre debe ser una cadena de texto. Es obligatorio usar comillas dobles (") alrededor de la clave.
• El separador: La clave y el valor se separan por dos puntos (:).
• El valor: Puede ser uno de los tipos de datos válidos de JSON.
• El separador de pares: Si hay múltiples pares clave/valor, se separan por una coma (,).

1.2.2. Objetos JSON (Delimitados por {})

Un objeto JSON (te puede ayudar ver los objetos de JavaScript) es una colección desordenada de pares clave/valor. Se usa para representar una entidad o registro único.

• El objeto comienza con una llave de apertura ({) y termina con una llave de cierre (}).
• Todos los datos dentro del objeto deben seguir la estructura de pares clave/valor.

Ejemplo de objeto JSON:

{
  "titulo": "Programación Avanzada",
  "autor": "Jane Smith",
  "anioPublicacion": 2023,
  "esBestseller": true,
  "editorial": null 
}Lenguaje del código: JSON / JSON con comentarios (json)

Análisis del ejemplo:

• "titulo", "autor", "anioPublicacion", "esBestseller" y "editorial" son las claves.
• "Programación Avanzada", "Jane Smith", 2023, true y null son los valores.
• Observa que todas las claves y los valores de tipo string están entre comillas dobles.

1.2.3. Arreglos JSON (Delimitados por [])

Un arreglo JSON (te puede ayudar ver los arreglos en JavaScript) es una lista ordenada de valores. Se usa para representar colecciones de datos.

• El arreglo comienza con un corchete de apertura ([) y termina con un corchete de cierre (]).
• Los valores dentro del arreglo se separan por comas (,).
• Un arreglo puede contener cualquier tipo de valor válido en JSON, pero lo más común es que contenga objetos.

Ejemplo de arreglo JSON de objetos:

[
  {
    "id": 1,
    "nombre": "Laptop",
    "precio": 1200
  },
  {
    "id": 2,
    "nombre": "Teclado",
    "precio": 80
  },
  {
    "id": 3,
    "nombre": "Monitor",
    "precio": 350
  }
]Lenguaje del código: JSON / JSON con comentarios (json)

Análisis del ejemplo:

• En este ejemplo de un arreglo JSON, vemos cómo se utiliza un par de corchetes ([ y ]) para delimitar el arreglo.
• Dentro de ese arreglo hay tres elementos, y cada uno de ellos es un objeto JSON delimitado por llaves ({ y }).
• Estos objetos están separados por comas. A diferencia de un objeto JSON individual, aquí observamos cómo un arreglo nos permite almacenar múltiples objetos con la misma estructura, facilitando la organización de colecciones de datos similares, como una lista de productos.

1.3. Tipos de datos en JSON

JSON solo admite un conjunto limitado de tipos de datos, lo que contribuye a su simplicidad. A diferencia de JavaScript, no permite funciones, fechas o valores indefinidos.

Los tipos de datos válidos en JSON son:

• String: Cadenas de texto. Deben usar comillas dobles. Ej: "Hola Mundo".
• Number: Números enteros o flotantes. Ej: 100, 3.14.
• Boolean: Valores booleanos. Ej: true o false.
• Null: Representa un valor vacío o nulo. Ej: null.
• Object: Una colección de pares clave/valor (entre {}).
• Array: Una lista ordenada de valores (entre []).

1.4. JSON vs. Objetos de JavaScript

Aunque JSON se parece mucho a un objeto JavaScript, no son lo mismo. La diferencia clave es la sintaxis estricta de JSON.

RESUMEN:

• JSON es la forma en que los datos viajan de un lugar a otro (como de un servidor a un navegador)
• Mientras que los objetos de JavaScript son la forma en que esos datos son manipulados y usados dentro de tu aplicación JavaScript.
• La habilidad de convertir entre estos dos formatos (JSON.parse() y JSON.stringify()) es lo que hace posible la comunicación en el desarrollo web moderno.

2. ¿Para que sirven los JSON?

JSON sirve principalmente como el formato estándar para el intercambio de datos entre sistemas, especialmente entre un servidor y un cliente (como un navegador web o una aplicación móvil).

Su función es similar a la de un idioma universal que permite que diferentes sistemas, escritos en distintos lenguajes de programación (JavaScript, Python, Java, etc.), se comuniquen y entiendan la información de manera estructurada y eficiente.

Aquí te detallo los usos clave de JSON:

2.1. Comunicación entre cliente y servidor (APIs REST)

Este es el uso más común y fundamental de JSON. Cuando interactúas con una aplicación web, como al iniciar sesión, cargar una lista de productos, o enviar un formulario, tus datos necesitan viajar al servidor.

1. Peticiones (Requests):
   • Cuando el cliente (navegador como Google) envía información al servidor (por ejemplo, los datos de un usuario para registrarse), a menudo se convierte un objeto JavaScript en una cadena JSON (JSON.stringify()) y se envía en el cuerpo de la petición HTTP.
2. Respuestas (Responses):
   • El servidor procesa la solicitud y devuelve los datos solicitados (como los detalles de un perfil de usuario o la lista de artículos de un blog) en formato JSON.
   • El cliente recibe esta cadena de texto y la convierte de nuevo en un objeto JavaScript (JSON.parse()) para poder manipularla fácilmente.

2.2. Almacenamiento de datos estructurados

JSON es ideal para almacenar datos de forma organizada y legible.

1. Bases de datos NoSQL (como MongoDB):
   • Muchas bases de datos NoSQL almacenan datos en un formato similar a JSON (a menudo llamado BSON, una versión binaria de JSON). Esto permite almacenar documentos flexibles y complejos sin la necesidad de un esquema estricto como en las bases de datos relacionales.
2. Archivos de configuración:
   • Es común usar archivos .json para almacenar configuraciones de aplicaciones, variables de entorno, o ajustes de proyectos (por ejemplo, el archivo package.json en Node.js, que gestiona las dependencias de un proyecto).

2.3. Serialización y deserialización de objetos

¿Qué es la serialización?

La serialización es el proceso de convertir un objeto en una secuencia de bytes o una cadena de texto que puede ser fácilmente almacenada o transmitida.

JSON es un excelente formato para esto:

🎯Guardar el estado de una aplicación: Si tienes un objeto complejo en JavaScript (por ejemplo, el estado de un juego o un carrito de compras) y quieres guardarlo para usarlo más tarde, puedes convertirlo a JSON y almacenarlo en localStorage del navegador. Cuando el usuario regrese, puedes deserializar el JSON y restaurar el objeto.

RESUMEN: La razón por la que JSON es tan valioso es su combinación de simplicidad, legibilidad y compatibilidad universal. Facilita enormemente el movimiento de datos en el desarrollo de software, haciendo que la comunicación entre diferentes plataformas sea rápida y eficiente.

3. Ejemplo usando JSON para entender como funcionan.

Imagina que estás en una tienda online. Aquí, el servidor tiene guardados los productos en su base de datos, y para que vos, usuario, puedas visualizar estos productos, internamente sucede lo siguiente:

1. El navegador hace una petición al servidor (base de datos) para que le envié los productos
   • JavaScript usa fetch() para pedir los productos.
2. El servidor responde con un JSON
   • El servidor convierte los datos de la base en texto JSON.
3. JavaScript convierte el JSON en objetos
   • Usás .json() para parsearlo automáticamente:
4. JavaScript trabaja con los datos
   • Ahora tenés un array de objetos que podés recorrer.
5. Se muestran los productos en la página (DOM)
   • JS crea elementos HTML con esos datos:

3.1. Ejemplo práctico: Solicitud de productos

3.1.1. El servidor prepara la respuesta

Una vez que el navegador solicita el envió de los productos, el servidor (por ejemplo, escrito en Python, Node.js o PHP) consulta su base de datos y obtiene la información de los productos. Para enviarla al cliente, el servidor estructura estos datos en un formato de texto JSON.

[
  {
    "id": 101,
    "nombre": "Laptop Ultraligera",
    "precio": 1250.00,
    "categoria": "Electrónicos",
    "enStock": true
  },
  {
    "id": 102,
    "nombre": "Teléfono Inteligente",
    "precio": 799.50,
    "categoria": "Electrónicos",
    "enStock": false
  },
  {
    "id": 103,
    "nombre": "Auriculares Bluetooth",
    "precio": 85.00,
    "categoria": "Accesorios",
    "enStock": true
  }
]
Lenguaje del código: JSON / JSON con comentarios (json)

El servidor envía esta cadena de texto al cliente a través de una respuesta HTTP.

3.1.2. El Cliente (JavaScript) recibe y procesa el JSON

DATO! En el navegador, utilizamos JavaScript, a menudo con la API fetch(), para realizar la solicitud al servidor.

Aquí es donde entra en juego el poder del objeto JSON en JavaScript. Cuando fetch() recibe la respuesta del servidor, la respuesta es inicialmente una cadena de texto JSON.

Para poder trabajar con esos datos en nuestro código, necesitamos convertirlos en un objeto JavaScript

¿Cómo lo hacemos?👇.

// PASO 1: Usamos fetch para obtener la data del servidor
fetch('https://api.ejemplo.com/productos')
  .then(response => {
    // PASO 2: El método .json() de la respuesta convierte 
    // la cadena JSON recibida en un objeto JavaScript.
    // Esto internamente usa JSON.parse()
    return response.json(); 
  })
  .then(data => {
    // PASO 3: Ahora 'data' es un objeto/array de JavaScript 
    // y podemos acceder a sus propiedades directamente.
    
    console.log("Datos recibidos (Objeto JavaScript):", data);

    // Accedemos al primer producto en el arreglo:
    const primerProducto = data[0]; 
    console.log("Nombre del producto:", primerProducto.nombre);
    console.log("Precio:", primerProducto.precio);

    // Iteramos sobre los productos:
    data.forEach(producto => {
      console.log(`Producto: ${producto.nombre} | En stock: ${producto.enStock}`);
    });
  })
  .catch(error => {
    console.error("Error al obtener los datos:", error);
  });
Lenguaje del código: JavaScript (javascript)

3.1.3. El Papel de JSON en el Ejemplo

1. En el servidor:
   • Los datos estructurados se serializan (convierten a JSON) para poder ser enviados por la red.
2. En el cliente:
   • Los datos JSON recibidos se deserializan (convierten a un objeto JavaScript) para poder ser usados en la aplicación.

JSON facilita esta transición. Sin él, tendríamos que manejar los datos como texto plano, lo que sería mucho más complicado para procesar la información de forma estructurada.

const nuevoProducto = {
  nombre: "Teclado Mecánico",
  precio: 95.00,
  categoria: "Accesorios"
};

fetch('https://api.ejemplo.com/productos', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json' // Indicamos que enviamos JSON
  },
  // Convertimos el objeto JavaScript a una cadena JSON para el envío:
  body: JSON.stringify(nuevoProducto) 
})
.then(response => response.json())
.then(data => console.log('Producto creado:', data))
.catch(error => console.error('Error:', error));
Lenguaje del código: JavaScript (javascript)

4. Convertir el objeto JavaScript a JSON – JSON.stringify().

¿Qué es JSON.stringify()?

JSON.stringify() es un método de JavaScript que convierte un objeto o arreglo en una cadena de texto con formato JSON, útil para enviarlo a un servidor o guardarlo en almacenamiento local.

¿Cómo se usa?

JSON.stringify(valor);Lenguaje del código: JavaScript (javascript)

JSON.stringify() toma un objeto, arreglo o valor válido en JavaScript y lo convierte en una cadena de texto JSON.

Aquí te muestro el proceso paso a paso para crear JSON en JavaScript:

4.1. Crear un objeto JavaScript:

El primer paso es construir la estructura de datos que deseas representar, utilizando la sintaxis de objetos y arreglos de JavaScript.

EJEMPLO 1: Un objeto simple (similar a un usuario)

// Creamos un objeto JavaScript
const usuario = {
  nombre: "Carlos",
  edad: 25,
  esActivo: true,
  roles: ["usuario", "editor"]
};

console.log(usuario); 
// Resultado en la consola: { nombre: 'Carlos', edad: 25, esActivo: true, roles: [ 'usuario', 'editor' ] }
Lenguaje del código: JavaScript (javascript)

EJEMPLO 2: Un arreglo de objetos (similar a una lista de productos)

// Creamos un arreglo de objetos JavaScript
const productos = [
  {
    id: 1,
    nombre: "Laptop",
    precio: 1200
  },
  {
    id: 2,
    nombre: "Mouse",
    precio: 25
  }
];

console.log(productos);
// Resultado en la consola: [ { id: 1, nombre: 'Laptop', precio: 1200 }, { id: 2, nombre: 'Mouse', precio: 25 } ]
Lenguaje del código: JavaScript (javascript)

4.2. Convertir el objeto JavaScript a JSON:

Una vez que tienes tu objeto o arreglo JavaScript listo, utilizamos el método JSON.stringify() para convertirlo en una cadena de texto que sigue las reglas estrictas del formato JSON.

EJEMPLO 1: Convertir el objeto usuario

const usuarioJSON = JSON.stringify(usuario);

console.log(usuarioJSON); 
// Resultado (Cadena de texto JSON): '{"nombre":"Carlos","edad":25,"esActivo":true,"roles":["usuario","editor"]}'
Lenguaje del código: JavaScript (javascript)

• Aquí, usamos el método JSON.stringify, y entre paréntesis colocamos el nombre del objeto JS creado previamente (JSON.stringify(usuario);)
• Esta conversión la guardamos en una variable JS para su posterior uso (const usuarioJSON)

EJEMPLO 2: Convertir el arreglo productos

const productosJSON = JSON.stringify(productos);

console.log(productosJSON);
// Resultado (Cadena de texto JSON): '[{"id":1,"nombre":"Laptop","precio":1200},{"id":2,"nombre":"Mouse","precio":25}]'
Lenguaje del código: JavaScript (javascript)

• Aquí, usamos el método JSON.stringify, y entre paréntesis colocamos el nombre del arreglo JS creado previamente (JSON.stringify(productos);)
• Igual que el paso anterior, lo guardamos en la variable const productosJSON

4.3. Parámetros opcionales (valor, replacer, space)

Sintaxis con los parámetros opcionales de JSON.stringify():

JSON.stringify(valor, replacer, space);Lenguaje del código: JavaScript (javascript)

• valor: El objeto o valor de JavaScript que quieres convertir a una cadena JSON. Esto es obligatorio.
• replacer: (Opcional) Un argumento para controlar cómo los valores del objeto se transforman y se incluyen en la cadena JSON. Puede ser una función o un arreglo de strings.
• space: (Opcional) Un argumento para añadir espacios en blanco a la cadena JSON resultante, haciéndola más legible.

Vamos a detallar cada uno.

4.3.1. El Parámetro replacer

El parámetro replacer te permite personalizar el proceso de serialización. Puedes usarlo para:

• Filtrar propiedades: Incluir solo ciertas propiedades de tu objeto.
• Modificar valores: Cambiar el formato o el valor de una propiedad antes de que se incluya en el JSON.
• Excluir tipos de datos específicos: Por ejemplo, si tienes funciones o fechas que JSON.stringify() no maneja por defecto.

Tienes dos formas de usar replacer: un arreglo o una función.

a) replacer como un Arreglo de Strings (Filtro por Claves)

Cuando replacer es un arreglo de strings, JSON.stringify() solo incluirá las propiedades de tu objeto cuyas claves coincidan con los strings en el arreglo. Es un filtro directo.

Sintaxis: JSON.stringify(objeto, ["clave1", "clave2", ...])

Ejemplo: Imagina que tienes un objeto usuario con datos sensibles que no quieres enviar siempre.

const usuarioConDatosSensibles = {
  id: "user_123",
  nombre: "Alice",
  email: "[email protected]",
  passwordHash: "sdlfkj3209sdfkjsdflkjsdf", // ¡No queremos esto en el JSON público!
  ultimaConexion: new Date(), // JSON.stringify() no maneja bien las fechas por defecto
  rol: "admin"
};

// Queremos crear un JSON para mostrar en un perfil público,
// excluyendo la contraseña y la fecha (por ahora, ya veremos cómo manejarla).
const clavesPermitidas = ["id", "nombre", "email", "rol"];
const usuarioPublicoJSON = JSON.stringify(usuarioConDatosSensibles, clavesPermitidas);

console.log("JSON para perfil público:");
console.log(usuarioPublicoJSON);
// Salida: {"id":"user_123","nombre":"Alice","email":"[email protected]","rol":"admin"}

// Comparar con el stringify sin replacer (incluye todo, incluso passwordHash y una fecha fea):
console.log("\nJSON sin replacer (completo):");
console.log(JSON.stringify(usuarioConDatosSensibles));
// Salida: {"id":"user_123","nombre":"Alice","email":"[email protected]","passwordHash":"sdlfkj3209sdfkjsdflkjsdf","ultimaConexion":"2025-07-14T13:37:32.000Z","rol":"admin"}
Lenguaje del código: JavaScript (javascript)

Explicación:

1. Definimos usuarioConDatosSensibles.
2. Creamos un arreglo clavesPermitidas con los nombres de las propiedades que SÍ queremos que aparezcan en el JSON.
3. Al llamar a JSON.stringify(usuarioConDatosSensibles, clavesPermitidas), solo las propiedades id, nombre, email y rol se incluyen en la cadena JSON resultante. passwordHash y ultimaConexion son ignoradas.

b) replacer como una Función (Transformación de Valores)

Cuando replacer es una función, se llama para cada par (clave, valor) en el objeto que se está serializando. Esta función te da un control mucho más granular, ya que puedes decidir qué valor se incluye, cómo se formatea, o incluso si la propiedad se omite por completo.

Sintaxis: JSON.stringify(objeto, function(clave, valor) { ... })

La función replacer recibe dos argumentos:

• clave: El nombre de la propiedad actual.
• valor: El valor de la propiedad actual.

La función debe retornar el valor que quieres que aparezca en el JSON.

• Si retornas el valor original, se incluye tal cual.
• Si retornas un nuevoValor, ese nuevoValor se incluye.
• Si retornas undefined, la propiedad se omite completamente del JSON resultante.

Ejemplo: Filtrar y transformar propiedades.

const pedido = {
  id: "P001",
  cliente: "Juan Pérez",
  articulos: [
    { nombre: "Camisa", cantidad: 2, precioUnitario: 30 },
    { nombre: "Pantalón", cantidad: 1, precioUnitario: 50 }
  ],
  fechaPedido: new Date(), // Objeto Date
  total: 110,
  detallesInternos: "Notas de envío: urgente", // Queremos omitir esto
  metodoPago: "Tarjeta"
};

const pedidoParaAPI = JSON.stringify(pedido, (clave, valor) => {
  // `this` en la función replacer se refiere al objeto padre del valor actual

  // Caso 1: Omitir propiedades específicas
  if (clave === "detallesInternos") {
    return undefined; // Retornar undefined para omitir esta propiedad
  }

  // Caso 2: Transformar objetos Date a un formato de string ISO
  if (clave === "fechaPedido" && valor instanceof Date) {
    return valor.toISOString(); // Convertir la fecha a un formato estándar
  }

  // Caso 3: Modificar el valor de una clave específica
  if (clave === "total") {
    return valor.toFixed(2); // Asegurar que el total tenga 2 decimales
  }

  // Si no se cumple ninguna de las condiciones anteriores,
  // retornar el valor original para que se incluya normalmente.
  return valor;
});

console.log("JSON del pedido transformado:");
console.log(pedidoParaAPI);
/* Salida (puede variar ligeramente en la fecha por la hora actual):
{
  "id":"P001",
  "cliente":"Juan Pérez",
  "articulos":[
    {"nombre":"Camisa","cantidad":2,"precioUnitario":30},
    {"nombre":"Pantalón","cantidad":1,"precioUnitario":50}
  ],
  "fechaPedido":"2025-07-14T13:37:32.000Z", // Fecha formateada
  "total":"110.00",                       // Total con 2 decimales (string ahora)
  "metodoPago":"Tarjeta"
}
*/
Lenguaje del código: JavaScript (javascript)

Explicación:

1. La función replacer se ejecuta para cada par clave/valor, incluso para los objetos y arreglos anidados.
2. Si la clave es "detallesInternos", retornamos undefined, lo que causa que esa propiedad no se incluya en el JSON final.
3. Si la clave es "fechaPedido" y el valor es una instancia de Date, la convertimos a su representación ISO (.toISOString()), que es un formato de string estándar para fechas en JSON.
4. Si la clave es "total", aplicamos .toFixed(2) para asegurar dos decimales. Observa que esto convierte el número en un string.
5. Para el resto de las propiedades, simplemente retornamos el valor original, asegurando que se incluyan como siempre.

4.3.2. El Parámetro space

El parámetro space es puramente para formatear la salida del JSON y hacerla más legible para los humanos. No afecta los datos en sí, solo su apariencia.

• Puede ser un número (de 0 a 10): Indica el número de espacios a usar para la indentación.
• Puede ser una cadena de texto (hasta 10 caracteres): Utiliza esta cadena para la indentación.

Sintaxis: JSON.stringify(objeto, replacer, space)

Ejemplo:

const libro = {
  titulo: "El Viaje del Héroe",
  autor: "Joseph Campbell",
  paginas: 400,
  genero: ["Mitología", "Psicología"],
  disponible: true
};

// Ejemplo 1: Sin indentación (por defecto)
const libroJSONCompacto = JSON.stringify(libro);
console.log("--- JSON Compacto ---");
console.log(libroJSONCompacto);
// Salida: {"titulo":"El Viaje del Héroe","autor":"Joseph Campbell","paginas":400,"genero":["Mitología","Psicología"],"disponible":true}

// Ejemplo 2: Indentación con 2 espacios (¡muy común!)
const libroJSONLegible2Espacios = JSON.stringify(libro, null, 2);
console.log("\n--- JSON Legible (2 espacios) ---");
console.log(libroJSONLegible2Espacios);
/* Salida:
{
  "titulo": "El Viaje del Héroe",
  "autor": "Joseph Campbell",
  "paginas": 400,
  "genero": [
    "Mitología",
    "Psicología"
  ],
  "disponible": true
}
*/

// Ejemplo 3: Indentación con 4 espacios
const libroJSONLegible4Espacios = JSON.stringify(libro, null, 4);
console.log("\n--- JSON Legible (4 espacios) ---");
console.log(libroJSONLegible4Espacios);
/* Salida:
{
    "titulo": "El Viaje del Héroe",
    "autor": "Joseph Campbell",
    "paginas": 400,
    "genero": [
        "Mitología",
        "Psicología"
    ],
    "disponible": true
}
*/

// Ejemplo 4: Indentación con un string personalizado (por ejemplo, '\t' para tabulaciones)
const libroJSONTabulado = JSON.stringify(libro, null, '\t');
console.log("\n--- JSON Tabulado ---");
console.log(libroJSONTabulado);
/* Salida:
{
	"titulo": "El Viaje del Héroe",
	"autor": "Joseph Campbell",
	"paginas": 400,
	"genero": [
		"Mitología",
		"Psicología"
	],
	"disponible": true
}
*/
Lenguaje del código: JavaScript (javascript)

Explicación:

1. Cuando space es un número (como 2 o 4), JSON.stringify() añade esa cantidad de espacios al inicio de cada nueva línea indentada.
2. Cuando space es una cadena de texto (como '\t' o '- '), usa esa cadena como indentación. Solo los primeros 10 caracteres de la cadena se utilizan.
3. Si no quieres usar el parámetro replacer pero sí quieres indentación, debes pasar null como segundo argumento (como se ve en los ejemplos libroJSONLegible2Espacios, libroJSONLegible4Espacios, libroJSONTabulado).

NOTA! Dominar estos parámetros te da un control formidable sobre la salida de tu JSON, lo que es invaluable para la depuración, la comunicación con APIs y la serialización de datos de manera eficiente.

5. Convertir un JSON en objeto JavaScript – JSON.parse()

¿Qué es JSON.parse()?

Es un método de JavaScript que convierte una cadena de texto con formato JSON en un objeto JavaScript real que podés usar en tu código.

¿Cómo se usa?

La sintaxis básica es muy simple:

JSON.parse(textoJSON);Lenguaje del código: JavaScript (javascript)

Donde textoJSON es la cadena de texto que deseas convertir.

5.1. Ejemplo 1: JSON de una persona

PASO 1: Tenés un JSON en forma de string (texto)

const jsonString = '{"nombre": "Manuel", "edad": 36}';Lenguaje del código: JavaScript (javascript)

Esto NO es un objeto todavía. Es solo un texto con formato JSON (fijate que todo está entre comillas, como si fuera un texto plano).

PASO 2: Usás JSON.parse() para convertirlo

const persona = JSON.parse(jsonString);Lenguaje del código: JavaScript (javascript)

Ahora persona sí es un objeto real de JavaScript. Podés usar sus propiedades como cualquier objeto:

console.log(persona.nombre); // "Manuel"
console.log(persona.edad);   // 36Lenguaje del código: JavaScript (javascript)

¿Qué pasa internamente?

• Antes:
  jsonString era un string:
  "{"nombre": "Manuel", "edad": 36}"
• Después:
  persona es un objeto real:
  { nombre: "Manuel", edad: 36 }

5.2. Ejemplo 2: JSON con un array de productos

const productosJSON = '[{"id":1,"nombre":"Zapatillas"},{"id":2,"nombre":"Remera"}]';Lenguaje del código: JavaScript (javascript)

Esto es una cadena de texto con un array de objetos adentro.

Convertimos con JSON.parse()

const productos = JSON.parse(productosJSON);Lenguaje del código: JavaScript (javascript)

Ahora productos es un array JavaScript real, podés recorrerlo:

productos.forEach(producto => {
  console.log(producto.nombre);
});
// Salida:
// Zapatillas
// RemeraLenguaje del código: JavaScript (javascript)

⚠️IMPORTANTE!!! Solo podés parsear strings válidos en formato JSON

Este string SÍ es válido:

'{"nombre":"Manuel"}'Lenguaje del código: JavaScript (javascript)

Este string NO es válido (claves sin comillas, comas mal puestas, etc.):

'{nombre: "Manuel"}' // ❌ clave sin comillas dobles → erroLenguaje del código: JavaScript (javascript)

💡¿Cómo solucionar este problema?

5.3. Manejo de Errores: Cuando el JSON es Inválido

Es una buena práctica usar un bloque try...catch para manejar estos errores de forma elegante:

const jsonInvalido = '{"nombre": "Luis", "edad": 30, "ciudad": "Buenos Aires",}'; // Coma extra al final - ¡Inválido!
const otroJsonInvalido = '{nombre: "Maria"}'; // Clave sin comillas dobles - ¡Inválido!

try {
  const data = JSON.parse(jsonInvalido);
  console.log("JSON Válido:", data);
} catch (error) {
  console.error("¡Error al parsear JSON (jsonInvalido)!:", error.message);
  // Output: ¡Error al parsear JSON (jsonInvalido)!: Expected '}' after property value in JSON at position 52
}

try {
  const data = JSON.parse(otroJsonInvalido);
  console.log("JSON Válido:", data);
} catch (error) {
  console.error("¡Error al parsear JSON (otroJsonInvalido)!:", error.message);
  // Output: ¡Error al parsear JSON (otroJsonInvalido)!: Expected property name enclosed in double quotes
}

// Ejemplo de JSON válido dentro de un try-catch
const jsonValido = '{"pais": "Argentina"}';
try {
  const dataValida = JSON.parse(jsonValido);
  console.log("JSON Válido procesado correctamente:", dataValida);
} catch (error) {
  console.error("Este no debería dar error:", error);
}
Lenguaje del código: JavaScript (javascript)

Explicación del manejo de errores:

• El bloque try intenta ejecutar el código.
• Si JSON.parse() encuentra un problema de sintaxis en la cadena, detiene la ejecución del try y salta al bloque catch.
• El bloque catch recibe el error y te permite manejarlo, por ejemplo, mostrando un mensaje al usuario o registrando el error para depuración. Esto evita que tu aplicación se bloquee completamente.

RESUMEN: , JSON.parse() es tu herramienta para tomar datos del «mundo exterior» (cadenas de texto JSON) y convertirlos en estructuras de JavaScript con las que puedes trabajar de forma nativa en tu aplicación. ¡Es la puerta de entrada a la manipulación de datos JSON en el lado del cliente!

6. JSON y las APIs: El Lenguaje de la Web Moderna

Como ya venimos mencionando hasta aquí; en el desarrollo de software actual, las aplicaciones rara vez son monolíticas o auto-suficientes. La mayor parte del tiempo, necesitan comunicarse con otros sistemas, ya sean servidores remotos, bases de datos o servicios de terceros. Esta comunicación se logra a través de APIs (Application Programming Interfaces).

JSON se ha consolidado como el formato de intercambio de datos preferido para estas APIs, especialmente para las APIs REST (Representational State Transfer). Su ligereza, legibilidad y universalidad lo convierten en el «idioma» estándar que hablan los distintos componentes de una aplicación distribuida.

6.1. ¿Por qué es fundamental conocer esto?

Como profesional en JavaScript, comprender esta interacción es crucial por varias razones:

✅ Interoperabilidad

Tu aplicación JavaScript (en un navegador, móvil o servidor Node.js) necesita comunicarse con servidores en distintos lenguajes como Python, Java o PHP. JSON actúa como el intérprete universal que permite que todos se entiendan.

✅ Consumo de Servicios

La mayoría de los datos que utilizarás (usuarios, productos, blogs, clima, etc.) provienen de APIs que devuelven información en JSON. Entender JSON es esencial para trabajar con servicios web.

✅ Envío de Datos

Cuando una aplicación necesita enviar datos al servidor (como registrar usuarios o actualizar perfiles), los datos se empaquetan en JSON para ser enviados fácilmente.

✅ Desarrollo Frontend/Backend

Como desarrollador frontend consumirás APIs JSON constantemente, y como backend (por ejemplo, con Node.js) deberás generarlas. Saber generar y consumir JSON te hace versátil en ambos entornos.

✅ Estándar de la Industria

JSON es el formato adoptado globalmente. Dominarlo es clave para ser un desarrollador web competente y actualizado.

6.2. Procesos de comunicación entre cliente y servidor:

La interacción entre tu aplicación (el cliente) y un servidor API usando JSON se resume en dos procesos clave:

1. Fetching Data (Obtener Datos – Peticiones GET)
   • Propósito: El cliente solicita información al servidor (ej. «dame la lista de productos», «dame los detalles del usuario X»).
   • Proceso:
     • El cliente envía una petición HTTP GET a una URL específica de la API.
     • El servidor procesa la solicitud, consulta sus fuentes de datos y serializa (convierte) la información relevante en una cadena de texto JSON.
     • El servidor envía esta cadena JSON como parte del cuerpo de su respuesta HTTP.
     • El cliente recibe la respuesta. Utiliza mecanismos como el método .json() de la API fetch() o la funcionalidad automática de librerías como Axios para des-serializar (parsear) esa cadena JSON, transformándola en un objeto o arreglo de JavaScript con el que tu código puede trabajar directamente (acceder a propiedades, recorrer arreglos, etc.).
2. Envío de Datos (Cargar Datos – Peticiones POST/PUT)
   • Propósito: El cliente envía nueva información o actualizaciones al servidor (ej. «crea un nuevo usuario con estos datos», «actualiza el precio de este producto»).
   • Proceso:
     • Tu aplicación JavaScript construye los datos que desea enviar como un objeto o arreglo de JavaScript.
     • Antes de enviarlo por la red, tu aplicación utiliza JSON.stringify() para serializar (convertir) ese objeto/arreglo de JavaScript en una cadena de texto JSON. Esta cadena es lo que se conoce como el payload (carga útil) de la solicitud.
     • El cliente envía una petición HTTP POST (para crear) o PUT (para actualizar) a la API, incluyendo esta cadena JSON en el cuerpo de la solicitud.
     • Es esencial que el cliente también incluya una cabecera HTTP Content-Type: application/json para informar al servidor que el cuerpo de la solicitud está en formato JSON.
     • El servidor recibe la solicitud, des-serializa (parsea) la cadena JSON del cuerpo de la petición en su propio formato de datos, procesa la información (ej. la guarda en una base de datos) y, a menudo, responde con un JSON indicando el éxito de la operación o los detalles del recurso creado/modificado.

7. Buenas prácticas y herramientas para trabajar con JSON

7.1. Validar estructura de JSON antes de usarlo

¿Por qué?

Porque los datos que vienen de un JSON pueden ser incompletos, mal formateados o inesperados. Validarlos evita errores cuando querés acceder a sus propiedades.

Ejemplo:

const respuesta = '{"nombre": "Manuel", "edad": 36}';
const datos = JSON.parse(respuesta);

// Validamos que sea un objeto
if (typeof datos === "object" && datos !== null) {
  // Validamos propiedades esperadas
  if ("nombre" in datos && "edad" in datos) {
    console.log("Nombre:", datos.nombre);
    console.log("Edad:", datos.edad);
  } else {
    console.warn("Faltan propiedades requeridas");
  }
}Lenguaje del código: JavaScript (javascript)

Explicación:

• typeof datos === "object": chequea que sea un objeto (no string ni número).
• "propiedad" in objeto: valida que una propiedad exista antes de usarla.
• Previene errores como undefined.nombre o null.edad.

Eejmplo validando un arrays:

const json = '[1, 2, 3]';
const lista = JSON.parse(json);

if (Array.isArray(lista)) {
  console.log("Es un array. Largo:", lista.length);
}Lenguaje del código: JavaScript (javascript)

7.2. Herramientas para visualizar y depurar JSON

7.2.1. Extensiones de navegador

• JSON Viewer (para Chrome o Firefox)
  • Colorea, pliega y facilita la lectura del JSON crudo que devuelve una API.
  • Muy útil cuando probás endpoints como:
    https://miweb.com/wp-json/wp/v2/posts

7.2.2. Sitios online útiles

• JSONLint
  ✔️ Pegás tu JSON y te dice si está bien escrito (sintaxis).
  ✔️ Te muestra el error exacto si algo está mal.

7.3. Evitar ciclos o referencias circulares

¿Qué es?

Una referencia circular es cuando un objeto hace referencia a sí mismo, directa o indirectamente.
Eso no es compatible con JSON y va a romper JSON.stringify.

Ejemplo de error:

const obj = {};
obj.miPropiaReferencia = obj;

console.log(JSON.stringify(obj)); // ❌ Error: TypeError: Converting circular structure to JSONLenguaje del código: JavaScript (javascript)

Explicación:

• obj.miPropiaReferencia = obj: el objeto se refiere a sí mismo.
• JSON.stringify no puede “cerrar ese círculo” y lanza un error.

✅ Solución:

No incluir referencias circulares en los objetos que querés convertir a JSON.
Si las necesitás, hay soluciones como librerías: flatted, circular-json, o usás un serializador personalizado.

7.4. Sanitizar datos sensibles antes de serializar

¿Por qué?

Antes de enviar o guardar JSON (por ejemplo en localStorage, una API o un archivo), debés evitar exponer datos sensibles como contraseñas, tokens, mails, etc.

Ejemplo:

const usuario = {
  nombre: "Manuel",
  email: "[email protected]",
  contraseña: "123456",
  token: "abc123tokenprivado"
};

// Eliminamos datos sensibles antes de enviar
const limpio = {
  nombre: usuario.nombre
};

const jsonLimpio = JSON.stringify(limpio);
console.log(jsonLimpio); // {"nombre":"Manuel"}Lenguaje del código: JavaScript (javascript)

✅ Alternativa con destructuring:

const { contraseña, token, ...usuarioSeguro } = usuario;
console.log(JSON.stringify(usuarioSeguro)); // {"nombre":"Manuel","email":"[email protected]"}Lenguaje del código: JavaScript (javascript)

7.5. Cuadro de buenas prácticas generales

8. Preguntas frecuentes y resumen sobre JSON en JavaScript.