JSON

Recursos Relacionados

Conceptos Fundamentales

Tipos de Datos

  • numbers: Valores numéricos sin comillas
  • strings: Texto entre comillas dobles “ “
  • booleans: true o false (sin comillas)
  • arrays: Listas de elementos entre [ ]
  • objects: Entidades entre { }
  • null: Valor nulo

Estructura JSON

  • Sintaxis: "key": "value"
  • Strings siempre entre comillas dobles “ “
  • Números enteros sin comillas
  • Entre { } representa una entidad
  • Soporta objetos anidados (objeto dentro de objeto)
  • MIME type: application/json

JavaScript Object vs JSON

Diferencias Clave

  • JSON: Siempre requiere comillas dobles en las keys
  • JS Object: No siempre necesita comillas dobles, puede terminar con coma
  • JS Object: Permite acceso individual a los datos

Conversiones

// Convertir objeto JS a JSON
JSON.stringify()

// Convertir JSON a objeto JS
JSON.parse('')

Validación JSON

Datos No Válidos

  • Funciones no son permitidas
  • Comillas simples no válidas
  • Keys sin comillas dobles

Arrays y Listas

Manejo de Arrays

  • Conversión de arreglos a JSON
  • Añadir propiedades a objetos:
user.friends = friends
  • Recorrer elementos con loops

Sistemas y APIs

Configuración de Entorno

npm i -g live-server
live-server

REST APIs y Fetch API

  • Solicitar datos del servidor
  • API de prueba: https://jsonplaceholder.typicode.com/
  • Endpoint específico: https://jsonplaceholder.typicode.com/posts

Métodos de Obtención de Datos

  • Usar fetch para traer datos de servidores externos
  • postsElements += equivalente a postsElements = postsElements +
  • Traer archivos locales como user.json del servidor

Aplicaciones Prácticas

Procesamiento de Datos

  • Conversión entre sistemas diferentes
  • Envío de objetos JSON a servidores
  • Uso del protocolo HTTP con Node.js
  • Recorrer datos de sistemas externos

Desarrollo con APIs

  • Manejo de respuestas de APIs REST
  • Procesamiento de arreglos de datos
  • Implementación de clientes HTTP
  • Integración con frontend y backend

JSON Ejemplos de Uso

Fetch API Básico

// Solicitud GET básica a una API REST
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => {
    console.log(response) // Response object completo
})

Procesamiento de Respuesta JSON

// Convertir respuesta a JSON y procesar datos
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => {
    return response.json() // Convierte la respuesta a objeto JavaScript
})
.then(data => {
    console.log(data) // Array con todos los posts
})

Manipulación del DOM con Datos JSON

// Renderizar datos JSON en el HTML
let postsElements = ''

fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => {
    return response.json()
})
.then(data => {
    // Recorrer array y construir HTML
    for (let i = 0; i < data.length; i++){
        postsElements += `<li>${data[i].userId} - ${data[i].title}</li>`
    }
    // Insertar en el DOM
    document.getElementById('posts').innerHTML = postsElements
})

Carga de Archivo JSON Local

// Cargar y procesar archivo JSON local
fetch('/user.json')
.then(response => response.json())
.then(data => {
    console.log(data) // Objeto con datos del usuario
})

Renderizado de Datos de Usuario

// Mostrar datos de usuario en la interfaz
fetch('/user.json')
.then(response => response.json())
.then(data => {
    document.getElementById('people').innerHTML = `<h1>${data.name} ${data.lastname}</h1>`
})

Ejemplo con Manejo de Errores

// Fetch con manejo completo de errores
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => {
    if (!response.ok) {
        throw new Error('Error en la respuesta: ' + response.status)
    }
    return response.json()
})
.then(data => {
    console.log('Datos recibidos:', data)
})
.catch(error => {
    console.error('Error en la solicitud:', error)
})

Ejemplo con Async/Await

// Versión moderna con async/await
async function loadUserData() {
    try {
        const response = await fetch('/user.json')
        const data = await response.json()
        document.getElementById('people').innerHTML = `<h1>${data.name} ${data.lastname}</h1>`
    } catch (error) {
        console.error('Error cargando datos:', error)
    }
}