JSON - Guía Completa

Domina el lenguaje de datos más importante para automatización

Duración: 60 minutos Nivel: Principiante a Intermedio Incluye: Editor interactivo

¿Qué es JSON?

JSON (JavaScript Object Notation) es un formato ligero de intercambio de datos. Es fácil de leer y escribir para humanos, y fácil de parsear y generar para máquinas.

🎯 ¿Por qué JSON es crucial para automatización?

  • APIs modernas: 95% de APIs web usan JSON
  • Configuración: n8n, Make y otras herramientas usan JSON
  • Almacenamiento: Bases de datos NoSQL almacenan en JSON
  • Intercambio: Comunicación entre sistemas

Sintaxis Básica de JSON

📋 Reglas Fundamentales

  • Los datos están en pares nombre/valor
  • Los datos están separados por comas
  • Los objetos están encerrados en llaves { }
  • Los arrays están encerrados en corchetes [ ]
  • Las cadenas están entre comillas dobles " "

🔤 Tipos de Datos JSON

{
  "string": "Texto entre comillas",
  "number": 42,
  "decimal": 3.14,
  "boolean_true": true,
  "boolean_false": false,
  "null_value": null,
  "array": ["item1", "item2", 3],
  "object": {
    "nested_key": "nested_value"
  }
}

Ejemplos Prácticos para Agencias

👤 Ejemplo 1: Datos de Cliente

{
  "cliente": {
    "id": 12345,
    "nombre": "Empresa ABC S.A.",
    "email": "contacto@empresaabc.com",
    "telefono": "+34-91-123-4567",
    "activo": true,
    "fecha_registro": "2024-01-15",
    "servicios": ["marketing", "desarrollo_web", "seo"],
    "presupuesto_mensual": 5000,
    "contacto_principal": {
      "nombre": "María García",
      "cargo": "Directora de Marketing",
      "email": "maria.garcia@empresaabc.com"
    }
  }
}

📊 Ejemplo 2: Respuesta de API de Analytics

{
  "reporte": {
    "periodo": "2024-01",
    "metricas": {
      "visitas_totales": 15420,
      "conversiones": 387,
      "tasa_conversion": 2.51,
      "revenue": 45670.50
    },
    "fuentes_trafico": [
      {
        "fuente": "google_ads",
        "visitas": 8250,
        "porcentaje": 53.5
      },
      {
        "fuente": "facebook_ads",
        "visitas": 4180,
        "porcentaje": 27.1
      },
      {
        "fuente": "organico",
        "visitas": 2990,
        "porcentaje": 19.4
      }
    ]
  }
}

Editor JSON Interactivo

Practica escribiendo JSON y verifica su validez en tiempo real:

📝 Escribe tu JSON:

🎨 JSON Formateado:

JSON vs Otros Formatos

📄 JSON

Ventajas:

  • Ligero y legible
  • Soporte nativo en JavaScript
  • Amplio soporte en APIs

Desventajas:

  • No soporta comentarios
  • Limitado a tipos básicos

📄 XML

Ventajas:

  • Muy estructurado
  • Soporte para metadatos
  • Validación con schemas

Desventajas:

  • Verboso y pesado
  • Difícil de leer

📄 CSV

Ventajas:

  • Muy simple
  • Excelente para tablas
  • Amplio soporte

Desventajas:

  • No jerárquico
  • Problemas con caracteres especiales

📊 El mismo dato en diferentes formatos:

JSON:

{"nombre": "Juan", "edad": 30, "ciudad": "Madrid"}

XML:

<persona>
  <nombre>Juan</nombre>
  <edad>30</edad>
  <ciudad>Madrid</ciudad>
</persona>

CSV:

nombre,edad,ciudad
Juan,30,Madrid

JSON en Automatización de Agencias

🔄 1. Configuración de n8n

Los workflows de n8n se almacenan en formato JSON:

{
  "nodes": [
    {
      "name": "Webhook",
      "type": "n8n-nodes-base.webhook",
      "parameters": {
        "httpMethod": "POST",
        "path": "nuevo-lead"
      }
    }
  ]
}

📧 2. API de Email Marketing

Envío de emails masivos via API:

{
  "to": [
    "cliente1@email.com",
    "cliente2@email.com"
  ],
  "subject": "Newsletter Enero 2024",
  "template_id": "newsletter_template",
  "variables": {
    "nombre_empresa": "Digital Agency",
    "mes": "Enero"
  }
}

📱 3. Webhook de Formulario

Datos recibidos cuando alguien llena un formulario:

{
  "timestamp": "2024-01-15T14:30:00Z",
  "form_id": "contacto",
  "data": {
    "nombre": "Ana López",
    "email": "ana@empresa.com",
    "telefono": "666-555-444",
    "mensaje": "Necesito una web para mi negocio",
    "presupuesto": "5000-10000"
  }
}

Verifica tu Conocimiento

1. ¿Cuál de estos es JSON válido?

2. ¿Qué tipo de dato NO existe en JSON?

3. ¿Cómo se representa un array vacío en JSON?

Herramientas Útiles para JSON

🌐 Online

  • JSONLint: Validador online
  • JSON Formatter: Formateador
  • JSON Editor Online: Editor visual

💻 Extensiones

  • JSON Viewer (Chrome): Para APIs
  • JSONView (Firefox): Formateo automático
  • Postman: Testing de APIs

⌨️ Editores

  • VS Code: Validación integrada
  • Sublime Text: Plugins JSON
  • Notepad++: Plugin JSTool
Volver a Inicio