JSON: formato de intercambio de datos en el desarrollo web moderno

JSON (JavaScript Object Notation) es un formato de intercambio de datos de texto ligero que se ha convertido en el estándar de facto en el desarrollo web moderno. A pesar de su nombre, que contiene la palabra «JavaScript», JSON es un formato independiente del lenguaje y es compatible con casi todos los lenguajes de programación modernos.

Historia

JSON fue desarrollado por Douglas Crockford a principios de la década de 2000 como una alternativa a XML para la transmisión de datos entre el navegador y el servidor. Originalmente, el formato se utilizó en los proyectos de State Software, donde Crocford trabajó como consultor. La especificación oficial de JSON se publicó en 2006 como RFC 4627 y luego se actualizó en 2013 (RFC 7159) y 2017 (RFC 8259).

La simplicidad y legibilidad de JSON lo convirtieron rápidamente en una opción popular para las API web. Hoy en día, JSON se utiliza no solo en el desarrollo web, sino también en archivos de configuración, bases de datos NoSQL, intercambio de datos entre microservicios y muchas otras áreas.

Conceptos básicos de sintaxis

JSON se basa en dos estructuras de datos universales: objetos (colecciones de pares clave-valor) y matrices (listas ordenadas de valores).

Tipos de datos

JSON admite los siguientes tipos de datos:

Líneas — secuencias de caracteres Unicode entre comillas dobles. Los caracteres especiales están protegidos con una barra invertida.

Números — números enteros o fraccionarios en el sistema de numeración decimal. JSON no distingue entre números enteros y de punto flotante a nivel de sintaxis.

Valores booleanos — true o false.

Null — valor especial que indica la ausencia de datos.

Objetos — colecciones desordenadas de pares clave-valor, donde las claves son siempre cadenas.

Matrices — listas ordenadas de valores de cualquier tipo.

Ejemplo de estructura

{
  "user": {
    "id": 12345,
    "username": "developer",
    "email": "dev@example.com",
    "isActive": true,
    "roles": ["admin", "editor"],
    "profile": {
      "firstName": "Ivan",
      "lastName": "Petrov",
      "age": 28
    },
    "lastLogin": null
  }
}

Trabajar con JSON en JavaScript

JavaScript proporciona un objeto integrado JSON con dos métodos principales para trabajar con este formato.

Serialización: JSON.stringify()

El método JSON.stringify() convierte un objeto JavaScript en una cadena JSON:

const user = {
  name: "Alexey",
  age: 30,
  skills: ["JavaScript", "Vue.js", "Node.js"]
};

const jsonString = JSON.stringify(user);
// '{"name":"Alexey","age":30,"skills":["JavaScript","Vue.js","Node.js"]}'

El método admite parámetros adicionales para controlar el formato:

// Formato bonito con sangría
const formatted = JSON.stringify(user, null, 2);

// Serialización selectiva de campos
const filtered = JSON.stringify(user, ['name', 'age']);

// Uso de la función de reemplazo
const custom = JSON.stringify(user, (key, value) => {
  if (typeof value === 'string') {
    return value.toUpperCase();
  }
  return value;
});

Deserialización: JSON.parse()

El método JSON.parse() convierte una cadena JSON de nuevo en un objeto JavaScript:

const jsonString = '{"name":"Alexey","age":30}'
const user = JSON.parse(jsonString);

console.log(user.name); // "Aleksei"

Puedes usar la función de recuperación para transformar valores al analizar:

const jsonWithDate = '{"created":"2024-01-15T10:30:00.000Z"}';

const data = JSON.parse(jsonWithDate, (key, value) => {
  if (key === 'created') {
    return new Date(value);
  }
  return value;
});

console.log(data.created instanceof Date); // true

Patrones prácticos de uso

Copia profunda de objetos

JSON se puede utilizar para la copia rápida y profunda de objetos, aunque este método tiene limitaciones:

const original = {
  name: "Project",
  data: { items: [1, 2, 3] }
};

const copy = JSON.parse(JSON.stringify(original));
copy.data.items.push(4);

console.log(original.data.items); // [1, 2, 3]
console.log(copy.data.items); // [1, 2, 3, 4]

Es importante recordar que este método no copia funciones, símbolos, valores indefinidos y pierde los prototipos de los objetos.

Almacenamiento de datos en localStorage

JSON es ideal para serializar datos antes de guardarlos en el almacenamiento del navegador:

// Guardar
const settings = {
  theme: 'dark',
  language: 'ru',
  notifications: true
};
localStorage.setItem('settings', JSON.stringify(settings));

// Cargando
const savedSettings = JSON.parse(localStorage.getItem('settings'));

Trabajar con la API

Las API modernas utilizan JSON como formato principal de intercambio de datos:

// Envío de datos al servidor
async function createUser(userData) {
  const response = await fetch('/api/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(userData)
  });
  
  return await response.json();
}

// Uso
const newUser = await createUser({
  name: "Maria",
  email: "maria@example.com"
});

Errores comunes y sus soluciones

Enlaces cíclicos

JSON.stringify() arroja un error si hay referencias circulares:

const obj = { name: "test" };
obj.self = obj;

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

// Solución con WeakSet
function stringifyWithCircular(obj) {
  const seen = new WeakSet();
  return JSON.stringify(obj, (key, value) => {
    if (typeof value === "object" && value !== null) {
      if (seen.has(value)) {
        return "[Circular]";
      }
      seen.add(value);
    }
    return value;
  });
}

JSON no válido

Al trabajar con fuentes de datos externas, utilice siempre el procesamiento de errores:

function safeJsonParse(jsonString, fallback = null) {
  try {
    return JSON.parse(jsonString);
  } catch (error) {
    console.error('JSON parsing error:', error.message);
    return fallback;
  }
}

const data = safeJsonParse(userInput, {});

Pérdida de tipos de datos especiales

JSON no admite fechas, expresiones regulares y otros tipos especiales:

const data = {
  created: new Date(),
  pattern: /test/gi
};

const json = JSON.stringify(data);
// {"created":"2024-11-21T10:00:00.000Z","pattern":{}}

// Solución: creación de métodos personalizados toJSON
data.created.toJSON = function() {
  return { _type: 'Date', value: this.toISOString() };
};

JSON Schema: validación de datos

JSON Schema es un diccionario para describir y validar la estructura de los datos JSON:

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "minLength": 1,
      "maxLength": 100
    },
    "age": {
      "type": "integer",
      "minimum": 0,
      "maximum": 150
    },
    "email": {
      "type": "string",
      "format": "email"
    }
  },
  "required": ["name", "email"]
}

El uso de JSON Schema ayuda a garantizar la integridad de los datos en aplicaciones de gran tamaño y a crear documentación para la API.

Rendimiento y optimización

Al trabajar con grandes cantidades de datos, es importante tener en cuenta el rendimiento de las operaciones con JSON:

// Evita el análisis múltiple
// Malo
for (let i = 0; i < 1000; i++) {
  const data = JSON.parse(jsonString);
  processData(data);
}

// Bien
const data = JSON.parse(jsonString);
for (let i = 0; i < 1000; i++) {
  processData(data);
}

// Utiliza streaming para archivos grandes
async function processLargeJsonFile(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  const decoder = new TextDecoder();
  
  // Procesamiento por partes
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    const chunk = decoder.decode(value, { stream: true });
    // Procesamiento de chunk
  }
}

Seguridad al trabajar con JSON

Protección contra inyecciones JSON

Al trabajar con la entrada del usuario, es importante evitar la concatenación directa de cadenas:

// No es seguro
const userInput = getUserInput();
const jsonString = '{"data":"' + userInput + '"}';

// Seguro
const jsonString = JSON.stringify({ data: userInput });

Validación de datos de entrada

Valida siempre los datos obtenidos de fuentes externas:

function validateUserData(data) {
  if (!data || typeof data !== 'object') {
    throw new Error('Incorrect data format');
  }
  
  if (!data.name || typeof data.name !== 'string') {
    throw new Error('Required name field is missing');
  }
  
  if (data.age && (typeof data.age !== 'number' || data.age < 0)) {
    throw new Error('Invalid age value');
  }
  
  return true;
}

Conclusión

JSON se ha convertido en una parte integral del desarrollo moderno debido a su simplicidad, versatilidad y amplio soporte. Comprender las complejidades de trabajar con este formato, conocer los patrones comunes y los posibles problemas ayuda a crear aplicaciones más fiables y productivas. Independientemente de si trabajas con API, archivos de configuración o almacenamiento de datos local, JSON sigue siendo una herramienta fiable para el intercambio estructurado de información.

¿Quieres profundizar tus conocimientos de JavaScript y otras tecnologías de desarrollo web?

Únete a la plataforma educativa Kodik, donde encontrarás cursos interactivos sobre JavaScript, Python, HTML, CSS y otras tecnologías populares. Kodik ayuda a los desarrolladores novatos a dominar la programación a través de tareas prácticas y aprendizaje estructurado.

Únete también a nuestro Canal de Telegram, donde recibirás el apoyo de desarrolladores experimentados, podrás discutir temas complejos y estar al tanto de las últimas noticias del mundo del desarrollo.