Saltar al contenido principal

JSON en JavaScript: Qué es y cómo usarlo con ejemplos prácticos

JSON en JavaScript

Aprende qué es JSON y cómo usarlo en JavaScript. Descubre cómo leer, crear y manipular datos con ejemplos simples para principiantes.

¿Qué es JSON y para qué sirve en programación?​

JSON (JavaScript Object Notation) es un formato ligero de intercambio de datos que es fácil de leer y escribir para los humanos, y fácil de parsear y generar para las máquinas. Se utiliza comúnmente para transmitir datos entre un servidor y una aplicación web, así como para almacenar configuraciones y datos estructurados.

Diferencias entre JSON y JavaScript​

Aunque JSON se deriva de la sintaxis de objetos de JavaScript, hay diferencias clave entre ambos:

  • Sintaxis: JSON utiliza comillas dobles para las claves y los valores de cadena, mientras que en JavaScript se pueden usar comillas simples o dobles.

  • Tipos de datos: JSON admite un conjunto limitado de tipos de datos: cadenas, números, objetos, arrays, booleanos y nulos. JavaScript tiene tipos de datos adicionales como funciones, símbolos y undefined.

  • Estructura: JSON es estrictamente un formato de datos, mientras que JavaScript es un lenguaje de programación completo.

Sintaxis básica de JSON: claves y valores​

La sintaxis de JSON se basa en pares clave-valor. Una clave es una cadena que identifica un valor, y el valor puede ser de varios tipos de datos. Aquí hay un ejemplo básico de un objeto JSON:

{
  "nombre": "Juan",
  "edad": 30,
  "esEstudiante": false,
  "cursos": ["Matemáticas", "Física"],
  "direccion": {
    "calle": "Calle Falsa 123",
    "ciudad": "Springfield"
  }
}

Tipos de datos admitidos en JSON​

JSON admite los siguientes tipos de datos:

  • Cadenas (Strings): Deben estar entre comillas dobles. Ejemplo: "Hola, mundo!"

  • Números (Numbers): Pueden ser enteros o decimales. Ejemplo: 42, 3.14

  • Objetos (Objects): Colecciones de pares clave-valor encerradas entre llaves {}. Ejemplo: {"clave": "valor"}

  • Arrays: Listas ordenadas de valores encerradas entre corchetes []. Ejemplo: ["manzana", "banana", "naranja"]

  • Booleanos (Booleans): Valores true o false.

  • Nulo (Null): Representa la ausencia de valor. Ejemplo: null

Crear un objeto JSON en JavaScript​

Para crear un objeto JSON en JavaScript, puedes definir un objeto utilizando la sintaxis de objetos de JavaScript y luego convertirlo a una cadena JSON usando JSON.stringify(). Aquí tienes un ejemplo:

const persona = {
  nombre: "Ana",
  edad: 25,
  esEstudiante: true,
  cursos: ["Historia", "Literatura"],
  direccion: {
    calle: "Avenida Siempre Viva 742",
    ciudad: "Springfield",
  },
};

const personaJSON = JSON.stringify(persona);

console.log(personaJSON);

Resultado:

{
  "nombre": "Ana",
  "edad": 25,
  "esEstudiante": true,
  "cursos": ["Historia", "Literatura"],
  "direccion": { "calle": "Avenida Siempre Viva 742", "ciudad": "Springfield" }
}

Leer y parsear datos JSON en JavaScript​

Para leer y parsear datos JSON en JavaScript, puedes usar el método JSON.parse(), que convierte una cadena JSON en un objeto JavaScript. Aquí tienes un ejemplo:

const personaJSON =
  '{"nombre":"Ana","edad":25,"esEstudiante":true,"cursos":["Historia","Literatura"],"direccion":{"calle":"Avenida Siempre Viva 742","ciudad":"Springfield"}}';

const persona = JSON.parse(personaJSON);

console.log(persona.nombre); // Ana

console.log(persona.edad); // 25

console.log(persona.direccion.ciudad); // Springfield

Manipular datos JSON en JavaScript​

Una vez que has parseado una cadena JSON en un objeto JavaScript, puedes manipular los datos como lo harías con cualquier otro objeto. Aquí tienes algunos ejemplos:

const personaJSON =
  '{"nombre":"Ana","edad":25,"esEstudiante":true,"cursos":["Historia","Literatura"],"direccion":{"calle":"Avenida Siempre Viva 742","ciudad":"Springfield"}}';

const persona = JSON.parse(personaJSON);

// Agregar un nuevo curso

persona.cursos.push("Matemáticas");

// Actualizar la edad

persona.edad = 26;

// Eliminar la propiedad esEstudiante

delete persona.esEstudiante;

console.log(persona);

Ejemplo: almacenar datos con JSON en Local Storage​

Local Storage es una API del navegador que permite almacenar datos de manera persistente en el navegador del usuario. Puedes usar JSON para almacenar objetos complejos en Local Storage. Aquí tienes un ejemplo:

// Crear un objeto JavaScript

const usuario = {
  nombre: "Carlos",
  edad: 28,
  preferencias: {
    tema: "oscuro",
    idioma: "español",
  },
};

// Convertir el objeto a una cadena JSON y almacenarlo en Local Storage

localStorage.setItem("usuario", JSON.stringify(usuario));

// Recuperar la cadena JSON de Local Storage y parsearla a un objeto JavaScript

const usuarioGuardado = JSON.parse(localStorage.getItem("usuario"));

console.log(usuarioGuardado.nombre); // Carlos

console.log(usuarioGuardado.preferencias.tema); // oscuro

Leer datos JSON desde un archivo externo​

Puedes leer datos JSON desde un archivo externo utilizando la función fetch() en JavaScript. Aquí tienes un ejemplo de cómo hacerlo:

fetch("datos.json")
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
    // Manipular los datos JSON aquí
  })
  .catch((error) => console.error("Error al cargar el archivo JSON:", error));

Uso de JSON en APIs y peticiones HTTP​

JSON es el formato de datos más comúnmente utilizado en las APIs y las peticiones HTTP debido a su simplicidad y facilidad de uso. Cuando haces una petición a una API, los datos suelen ser enviados y recibidos en formato JSON.

Aquí tienes un ejemplo de cómo hacer una petición GET a una API que devuelve datos en formato JSON:

fetch("https://api.example.com/usuarios")
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
    // Manipular los datos JSON aquí
  })
  .catch((error) =>
    console.error("Error al hacer la petición a la API:", error)
  );

Convirtiendo entre JSON y otros formatos de datos​

JSON es un formato de datos muy versátil y se puede convertir fácilmente a otros formatos de datos como XML, CSV, etc. Existen bibliotecas y herramientas que facilitan estas conversiones. Aquí tienes un ejemplo simple de cómo convertir un objeto JSON a CSV utilizando JavaScript:

function jsonToCsv(json) {
  const keys = Object.keys(json[0]);
  const csv = [
    keys.join(","), // encabezados
    ...json.map((row) =>
      keys.map((key) => JSON.stringify(row[key], replacer)).join(",")
    ),
  ].join("\n");
  return csv;
}

const data = [
  { nombre: "Ana", edad: 25, ciudad: "Springfield" },
  { nombre: "Carlos", edad: 28, ciudad: "Shelbyville" },
];

const csvData = jsonToCsv(data);

console.log(csvData);

Manejo de errores al convertir JSON​

Al trabajar con JSON, es importante manejar posibles errores que puedan surgir durante la conversión entre cadenas JSON y objetos JavaScript. Aquí tienes un ejemplo de cómo manejar errores al parsear una cadena JSON:

const jsonString = '{"nombre":"Ana","edad":25,"esEstudiante":true}'; // Cadena JSON válida

try {
  const persona = JSON.parse(jsonString);
  console.log(persona);
} catch (error) {
  console.error("Error al parsear JSON:", error);
}

Diferencia entre XML y JSON en el intercambio de datos​

XML (eXtensible Markup Language) y JSON (JavaScript Object Notation) son dos formatos populares para el intercambio de datos. Aquí hay algunas diferencias clave entre ambos:

  • Sintaxis: XML utiliza una sintaxis basada en etiquetas, mientras que JSON utiliza una sintaxis basada en pares clave-valor.

  • Legibilidad: JSON es generalmente más fácil de leer y escribir para los humanos debido a su simplicidad, mientras que XML puede ser más verboso.

  • Tamaño: JSON suele ser más compacto que XML, lo que puede resultar en tiempos de transferencia más rápidos.

  • Soporte en JavaScript: JSON es nativo de JavaScript, lo que facilita su uso en aplicaciones web, mientras que XML requiere un análisis adicional.

Buenas prácticas al trabajar con JSON en JavaScript​

  • Validar JSON: Siempre valida las cadenas JSON antes de parsearlas para evitar errores.

  • Manejar errores: Usa bloques try-catch para manejar errores al parsear JSON.

  • Usar JSON.stringify con cuidado: Al convertir objetos a JSON, asegúrate de que no contengan funciones o propiedades circulares.

  • Mantener la estructura simple: Evita estructuras JSON demasiado complejas para facilitar su manejo y comprensión.

Conclusión​

JSON es una herramienta esencial en el desarrollo web moderno, facilitando el intercambio y almacenamiento de datos de manera eficiente. Su simplicidad y compatibilidad con JavaScript lo convierten en una opción popular para trabajar con datos estructurados. Al dominar el uso de JSON, podrás mejorar tus habilidades en la manipulación de datos y la interacción con APIs, lo que es fundamental para cualquier desarrollador web.

Recursos
Ejercicios

💻 Prueba este ejercicio básico sobre Local Storage y datos JSON en JavaScript: