Saltar al contenido principal

Comprender el formato de datos JSON 📦

Cuando aprendes sobre APIs, escuchas a menudo la palabra JSON. JSON es un formato que los programas utilizan para intercambiar datos. ¡Voy a explicarlo de manera muy simple!

¿Comparar JSON con la vida cotidiana?​

Comparemos JSON con una etiqueta de paquete de entrega.

📦 Paquete de entrega
┌──────────────────┐
│ Destinatario: Juan Pérez │
│ Dirección: Madrid Centro │
│ Teléfono: 600-123-456   │
│ Artículo: Libro         │
└──────────────────┘

Si escribimos esta información en JSON:

{
  "destinatario": "Juan Pérez",
  "direccion": "Madrid Centro",
  "telefono": "600-123-456",
  "articulo": "Libro"
}

El nombre oficial de JSON​

JSON = JavaScript Object Notation

Significa "Notación de Objetos de JavaScript", ¡pero se puede usar en todos los lenguajes de programación!

Reglas básicas de JSON​

1. Envuelve con llaves ​

{
  "nombre": "valor"
}

2. Usa comillas dobles " "​

{
  "nombre": "Juan Pérez"
}

3. Conecta el nombre y el valor con dos puntos :​

{
  "edad": 25
}

4. Separa múltiples informaciones con comas ,​

{
  "nombre": "Juan Pérez",
  "edad": 25,
  "profesion": "desarrollador"
}

Tipos de datos JSON​

Valores que se pueden usar en JSON:

1. Cadena de texto (String) ""​

{
  "nombre": "Juan Pérez",
  "ciudad": "Madrid"
}

2. Número (Number)​

{
  "edad": 25,
  "altura": 175.5,
  "temperatura": -5
}

3. Booleano (Boolean)​

{
  "registroCompleto": true,
  "emailVerificado": false
}

4. Array (Array) [ ]​

Para almacenar múltiples elementos:

{
  "hobbies": ["lectura", "cine", "programación"],
  "puntuaciones": [90, 85, 95]
}

5. Objeto (Object) ​

Para agrupar información:

{
  "usuario": {
    "nombre": "Juan Pérez",
    "edad": 25
  }
}

6. null​

Cuando no hay valor:

{
  "segundoNombre": null
}

Entender con ejemplos reales​

Ejemplo 1: Información de usuario 👤​

{
  "nombre": "Juan Pérez",
  "edad": 25,
  "email": "juan@example.com",
  "miembro": true,
  "direccion": {
    "ciudad": "Madrid",
    "distrito": "Centro"
  },
  "hobbies": ["lectura", "ver películas", "programar"]
}

Ejemplo 2: Producto de tienda online 🛍️​

{
  "producto": "Portátil",
  "precio": 1200,
  "stock": 5,
  "enOferta": true,
  "colores": ["plata", "gris", "negro"],
  "especificaciones": {
    "CPU": "i7",
    "RAM": "16GB",
    "almacenamiento": "512GB SSD"
  }
}

Ejemplo 3: Información del tiempo ☀️​

{
  "ciudad": "Madrid",
  "temperatura": 23,
  "clima": "soleado",
  "humedad": 60,
  "probabilidadLluvia": 0,
  "pronosticoSemanal": [
    {"dia": "Lun", "temperatura": 22},
    {"dia": "Mar", "temperatura": 24},
    {"dia": "Mie", "temperatura": 25}
  ]
}

Entender los arrays JSON​

Para almacenar múltiples datos, usa corchetes [ ]:

Array simple​

["manzana", "plátano", "naranja"]

Array de objetos​

[
  {
    "nombre": "Juan Pérez",
    "edad": 25
  },
  {
    "nombre": "Pedro García",
    "edad": 30
  },
  {
    "nombre": "María López",
    "edad": 28
  }
]

Cómo leer JSON​

{
  "estudiante": {
    "nombre": "Juan Pérez",
    "puntuaciones": [90, 85, 95],
    "aprobado": true
  }
}

Se lee así:

  • "Hay información de un estudiante"
  • "Su nombre es Juan Pérez"
  • "Las puntuaciones son 90, 85, 95"
  • "Aprobado es true (verdadero)"

JSON vs otros formatos​

JSON vs CSV​

CSV (formato de tabla como Excel):

nombre,edad,ciudad
Juan Pérez,25,Madrid
Pedro García,30,Barcelona

JSON:

[
  {"nombre": "Juan Pérez", "edad": 25, "ciudad": "Madrid"},
  {"nombre": "Pedro García", "edad": 30, "ciudad": "Barcelona"}
]

Ventajas de JSON:

  • Puede expresar estructuras complejas
  • Representa fácilmente datos anidados
  • Se usa como estándar en APIs

Ejemplos de uso práctico​

Ejemplo de respuesta de API​

Cuando solicitas información de usuario a la API de GitHub:

{
  "login": "github",
  "id": 1,
  "name": "GitHub",
  "location": "San Francisco",
  "public_repos": 344,
  "followers": 1000000,
  "following": 0
}

Ejemplo de archivo de configuración​

Configuración de programa en JSON:

{
  "nombreApp": "Mi sitio web",
  "version": "1.0.0",
  "baseDeDatos": {
    "host": "localhost",
    "puerto": 3306,
    "usuario": "admin"
  },
  "funciones": {
    "modoOscuro": true,
    "notificaciones": true,
    "guardadoAutomatico": false
  }
}

Usar herramientas JSON​

¡Prueba JSON con las herramientas de nuestro sitio!

1. Formatear JSON​

JSON Formatter - ¡Haz que el JSON complejo sea legible!

2. Explorar datos JSON​

JSON Path Tester - Encuentra los datos que necesitas en JSON

3. Convertir JSON a otros formatos​

Errores comunes y soluciones​

❌ Error 1: Olvidar la coma​

{
  "nombre": "Juan Pérez"
  "edad": 25
}

✅ Método correcto:​

{
  "nombre": "Juan Pérez",
  "edad": 25
}

❌ Error 2: Agregar coma al final​

{
  "nombre": "Juan Pérez",
  "edad": 25,
}

✅ Método correcto:​

{
  "nombre": "Juan Pérez",
  "edad": 25
}

❌ Error 3: Usar comillas simples​

{
  'nombre': 'Juan Pérez'
}

✅ Método correcto:​

{
  "nombre": "Juan Pérez"
}

❌ Error 4: Escribir comentarios​

{
  // Este es un comentario
  "nombre": "Juan Pérez"
}

¡No se pueden escribir comentarios en JSON! ❌

Dónde se usa JSON​

1. Comunicación de API 🌐​

La mayoría de las APIs web intercambian datos en JSON.

// Solicitud de API
fetch('https://api.example.com/users')
  .then(response => response.json())
  .then(data => console.log(data))

2. Archivos de configuración ⚙️​

  • package.json (Node.js)
  • tsconfig.json (TypeScript)
  • settings.json (VS Code)

3. Almacenamiento de datos 💾​

Las bases de datos NoSQL (MongoDB, etc.) almacenan datos en formato JSON.

4. Intercambio de datos 📤📥​

Cuando el servidor y el cliente intercambian datos.

Preguntas frecuentes (FAQ)​

P1: ¿JSON es un lenguaje de programación?​

R: ¡No! JSON es un formato de datos. Es simplemente una forma de representar datos.

P2: ¿JSON solo se usa con JavaScript?​

R: ¡No! Se puede usar en casi todos los lenguajes de programación.

  • Python
  • Java
  • C++
  • PHP
  • Ruby ¡Y muchos más!

P3: ¿Cuál es la diferencia entre JSON y XML?​

R: XML era un formato muy usado antes. JSON es más simple y más fácil de leer, por lo que ahora se usa más JSON.

XML:

<user>
  <name>Juan Pérez</name>
  <age>25</age>
</user>

JSON:

{
  "name": "Juan Pérez",
  "age": 25
}

P4: ¿Cuál es la extensión del archivo JSON?​

R: Es .json.

data.json
config.json
users.json

Validación JSON​

Para verificar si JSON tiene el formato correcto:

  1. Usar JSON Formatter
  2. Usar herramientas de validación JSON en línea
  3. Verificar en las herramientas de desarrollador del navegador

Práctica: Crea tu propio JSON​

Crea tu información en JSON:

{
  "nombre": "Tu nombre",
  "edad": tu_edad,
  "residencia": "Tu ciudad",
  "hobbies": [
    "hobby1",
    "hobby2",
    "hobby3"
  ],
  "estudiante": true,
  "presentacion": {
    "comidaFavorita": "...",
    "colorFavorito": "..."
  }
}
Consejo

¡Pégalo en JSON Formatter y presiona el botón "Format"! Se organizará bellamente y también podrás verificar errores de sintaxis.

Próximos pasos 🚀​

Si has entendido JSON:

  1. ✅ JSON Formatter - Formatear JSON
  2. ✅ JSON Path Tester - Buscar datos JSON
  3. ✅ API Tester - Probar APIs que usan JSON
  4. ✅ JSON to TypeScript - Convertir JSON a código

Conclusión​

¡JSON no es difícil! Es una forma de organizar datos.

Puntos a recordar:

  • { } Comienza y termina con llaves
  • " " Usa comillas dobles
  • : Conecta el nombre y el valor con dos puntos
  • , Separa elementos con comas
  • No hay coma después del último elemento

¿Puedes leer y escribir JSON ahora? 🎉

Si quieres aprender APIs y hacer desarrollo web, JSON es esencial. ¡Te acostumbrarás rápidamente viéndolo a menudo!