FlowingDev

JSON, explicado: el formato de datos favorito de internet

Aprende los fundamentos de JSON (JavaScript Object Notation), el formato ligero de intercambio de datos que impulsa las APIs y aplicaciones web modernas.

Probar la herramienta: Visor JSON

En una frase

JSON es una manera de estructurar datos en texto, como si fuera una lista o un diccionario, lo que hace súper fácil que tanto las computadoras como los humanos puedan leerlo, escribirlo e intercambiarlo.

El problema que resuelve

Imagina la web a principios de los 2000. Si querías que tu página web obtuviera nuevos datos sin tener que recargar la página por completo (un concepto nuevo y revolucionario llamado AJAX), probablemente estabas peleando con XML. XML (eXtensible Markup Language) era el campeón reinante del intercambio de datos. Era poderoso, estricto y... francamente, un poco pesado.

Un documento XML es verboso. Cada dato está envuelto en etiquetas de apertura y cierre.

<user>
  <id>123</id>
  <name>Alex</name>
  <isAdmin>true</isAdmin>
</user>

Esto no es terrible, pero es voluminoso. Y lo que es más importante, "parsearlo" en JavaScript —el lenguaje del navegador— era un dolor de cabeza. Tenías que navegar un complejo Document Object Model (DOM), lidiando con nodos, atributos y contenido de texto. Se sentía como usar un mazo para romper una nuez.

Y ahí es donde entra Douglas Crockford, un desarrollador que trabajaba en lo que se convertiría en Yahoo!. Se dio cuenta de algo brillante: JavaScript ya tenía una forma perfectamente buena y nativa para definir datos estructurados. Se llamaba "notación de objeto literal".

// ¡Esto es JavaScript puro y duro!
var user = {
  "id": 123,
  "name": "Alex",
  "isAdmin": true
};

Crockford se dio cuenta de que este subconjunto de la sintaxis de JavaScript era un formato de datos fantástico por derecho propio. Era ligero, fácil de leer para los humanos y —esta era la característica decisiva— trivial de parsear para JavaScript. Básicamente podías hacerle un eval() (aunque por razones de seguridad, ahora usamos métodos más seguros como JSON.parse()).

Formalizó este formato, le dio el nombre de JavaScript Object Notation (JSON) y creó un sitio web simple de una página explicándolo. Resolvió el problema de necesitar un formato de datos que fuera menos aparatoso que XML y nativo del entorno web. JSON se extendió como la pólvora, convirtiéndose en el lenguaje de facto para APIs, archivos de configuración y un sinfín de otras aplicaciones. Ganó porque era simple, práctico y nacido del mismísimo lenguaje al que fue diseñado para servir.

Cómo funciona bajo el capó

En esencia, JSON es solo un conjunto de reglas para escribir datos como texto. Piénsalo como un plano universal para una estructura de datos. Solo tiene dos formas de estructurar las cosas y seis tipos de datos simples para poner dentro.

Los Bloques de Construcción: Tipos de Datos

La elegancia de JSON proviene de su conjunto minimalista de tipos de valores. Todo en JSON es uno de estos.

Tipo Ejemplo Descripción
String "Hola, mundo!" Una secuencia de caracteres Unicode, envuelta en comillas dobles.
Number 42, -3.14, 2.99e8 Un número entero o de punto flotante. No existen NaN ni Infinity.
Boolean true, false Los valores lógicos para verdadero y falso, siempre en minúsculas.
Null null Representa la ausencia intencional de un valor, siempre en minúsculas.
Array [1, "dos", false] Una lista ordenada de valores, encerrada entre corchetes [].
Object {"key": "value"} Una colección no ordenada de pares clave/valor, entre llaves {}.

Eso es todo. Sin fechas, sin funciones, sin tipos especiales. Esta simplicidad es una característica, no un error (feature, not a bug), ya que garantiza que los datos puedan ser entendidos por prácticamente cualquier lenguaje de programación.

La Estructura: Objetos y Arrays

La verdadera magia ocurre cuando combinas estos bloques de construcción.

  • Objetos: se usan cuando tienes una colección de cosas con nombre. Las "claves" (los nombres) deben ser strings entre comillas dobles. Los "valores" pueden ser cualquiera de los seis tipos de datos, incluyendo otro objeto o un array. Así es como creas jerarquía.

  • Arrays: son para cuando tienes una lista ordenada de cosas. El orden importa y accedes a los elementos por su posición (índice), comenzando desde cero.

Construyamos un perfil de usuario simple. Es un objeto porque tiene propiedades con nombre como name y email. Una de esas propiedades, skills, es una lista, así que usamos un array.

{
  "userId": "u-9a8b7c",
  "username": "CodeWizard",
  "isActive": true,
  "lastLogin": null,
  "profile": {
    "realName": "Dana Scully",
    "location": "Washington, D.C."
  },
  "skills": [
    "Patología Forense",
    "Armas de Fuego",
    "Escepticismo Racional"
  ]
}

¿Ves el anidamiento? Un objeto (profile) es un valor dentro del objeto principal. Un array (skills) es otro valor. Esta estructura en forma de árbol puede ser tan profunda como necesites, permitiéndote modelar datos increíblemente complejos.

En JavaScript, acceder a estos datos es increíblemente intuitivo: data.username te daría "CodeWizard". data.profile.realName te daría "Dana Scully". data.skills[0] te daría "Patología Forense".

Este mapeo directo con las estructuras nativas del lenguaje es la razón por la que los desarrolladores lo aman.

Las Reglas del Juego: Sintaxis

Para que un JSON sea válido, tienes que seguir unas cuantas reglas estrictas. Esta rigidez es lo que lo hace tan confiablemente "parseable" por máquinas.

  1. Solo Comillas Dobles: Todas las claves y todos los valores de tipo string DEBEN estar encerrados en comillas dobles ("). Las comillas simples (') son un error de sintaxis.
  2. Sin Comas al Final: Se usa una coma para separar elementos en un array o pares en un objeto. No puedes tener una coma después del último elemento.
    // ¡MAL! Coma extra después de `true`
{
  "key1": "value1",
  "key2": true, 
}
  3. Objetos y Arrays: Los datos se estructuran en objetos ({}) o arrays ([]). Un documento JSON válido puede ser un solo valor (como el string "hola"), pero casi siempre es un objeto o un array como contenedor de nivel superior.
  4. Los Espacios en Blanco son Flexibles: Los espacios, tabulaciones y saltos de línea fuera de los strings no importan. Esto permite tanto formatos "bonitos" (pretty) e indentados para la lectura humana como formatos "minificados" (minified) en una sola línea para una transferencia de red eficiente.

Historias del mundo real

El Feed de Redes Sociales

A Maya, una desarrolladora front-end, se le encarga construir el feed de scroll infinito para una nueva red social. Cada vez que el usuario se desplaza cerca del final de la página, su código JavaScript necesita pedir más publicaciones al servidor. El servidor no responde con HTML, sino con datos puros. Envía un array de JSON, donde cada elemento es un objeto que representa una publicación. Este objeto contiene el texto de la publicación, el nombre de usuario del autor, un enlace a su foto de perfil, el número de "me gusta" e incluso un array anidado con los primeros comentarios. El código de Maya recibe este JSON limpio, recorre el array y crea dinámicamente el HTML para cada publicación, añadiéndolo a la página.

La lección: JSON es el alma de las aplicaciones web dinámicas modernas, actuando como el mensajero ligero entre el cerebro del servidor y la presentación del navegador.

La Configuración de un Juego

Leo, un desarrollador de juegos indie, está creando un juego de rol. Necesita gestionar cientos de ítems: espadas, pociones, armaduras, etc. "Hardcodear" las propiedades de cada ítem (nombre, daño, peso, precio) directamente en el código C++ del juego sería una pesadilla para balancear y actualizar. En su lugar, crea un archivo items.json. Es un objeto JSON gigante donde cada clave es un ID de ítem (como "longsword") y el valor es otro objeto que contiene todas sus estadísticas. Cuando el juego se inicia, lee este archivo y carga todos los datos de los ítems en memoria. Para rebalancear el juego, solo tiene que editar el archivo de texto, sin necesidad de volver a compilar.

La lección: JSON es un formato excelente para archivos de configuración, separando los datos de una aplicación de su lógica y haciéndolos fácilmente editables por humanos.

La Orquesta de Microservicios

Fatima, una ingeniera de backend, trabaja en un sistema compuesto por docenas de microservicios. Un "servicio de usuarios" gestiona las cuentas de usuario, un "servicio de pedidos" gestiona las compras y un "servicio de notificaciones" envía correos electrónicos. Cuando un usuario realiza un pedido, el servicio de pedidos necesita confirmar la dirección de envío del usuario. No consulta la base de datos directamente; en su lugar, hace una petición HTTP al endpoint de la API del servicio de usuarios, como GET /api/users/123/address. El servicio de usuarios responde con un objeto JSON simple: {"street": "123 Main St", "city": "Anytown"}. El servicio de pedidos lo parsea, valida el pedido y luego envía una petición al servicio de notificaciones (también con un payload JSON) para enviar el recibo por correo.

La lección: En un sistema distribuido, JSON sirve como un contrato universal y agnóstico al lenguaje, permitiendo que servicios escritos en Go, Python y Node.js se comuniquen entre sí sin problemas.

Errores y trampas comunes

  • Comas al Final (Trailing Commas): Este es el error de validación más común. Los arrays y objetos de JavaScript suelen ser más permisivos, pero JSON es estricto: no se permite una coma después del último elemento de una colección.
  • Comentarios: JSON no tiene comentarios. Y punto. Los desarrolladores acostumbrados a // o /* */ a menudo intentan añadirlos, lo que invalida inmediatamente el JSON. El "hack" oficial es añadir una clave como "_comment": "Tu nota aquí", que un parser simplemente tratará como otro dato más.
  • Comillas Simples vs. Comillas Dobles: Todas las claves y todos los strings deben usar comillas dobles ("). Si vienes de los diccionarios de Python o de algunas guías de estilo de JavaScript, puede que estés acostumbrado a las comillas simples, pero están prohibidas en JSON.
  • 'Undefined' No Existe: En JavaScript, una propiedad de objeto que falta es undefined. JSON no tiene este concepto. Para representar un valor ausente o vacío, debes usar null explícitamente.
  • Comillas sin Escapar: Si el valor de tu string necesita contener una comilla doble, debes escaparla con una barra invertida (\). Olvidar esto ({"quote": "Ella dijo "Hola""}) romperá la estructura. La forma correcta es {"quote": "Ella dijo \"Hola\""}.

Por qué debe estar en tu radar

En el desarrollo de software moderno, JSON no es que "esté en el radar"; es el radar. Es el formato por defecto para tantas tareas críticas que no estar familiarizado con él es como ser un chef que no sabe qué es la sal.

Deberías pensar en JSON siempre que:

  • Estés construyendo o consumiendo una API web.
  • Necesites un archivo de configuración para una aplicación.
  • Necesites almacenar datos estructurados en un archivo de texto simple o en una base de datos NoSQL como MongoDB.
  • Estés enviando datos desde un proceso del lado del servidor a una aplicación JavaScript del lado del cliente.
  • Necesites un formato simple y legible por humanos para serializar un objeto para enviarlo por la red o guardarlo en disco.

Esencialmente, si necesitas que dos programas diferentes hablen entre sí, o si necesitas separar tus datos de tu código, JSON es casi siempre tu primera y mejor respuesta.

Profundiza más

Teoría lista. Hora de ensuciarse las manos — 100% en tu navegador.

Probar la herramienta: Visor JSON