3.3 – DEL JSON AL DOM

Este es el paso donde el frontend deja de ser estático y pasa a ser dinámico y conectado al backend.

---

2. Qué es JSON

JSON (JavaScript Object Notation) es el formato estándar para intercambiar datos entre backend y frontend.

Ejemplo:

[
  { "id": 1, "marca": "Toyota", "modelo": "Corolla", "precio": 20000 },
  { "id": 2, "marca": "Ford", "modelo": "Focus", "precio": 18000 }
]

En JavaScript, JSON se convierte automáticamente en objetos reales:

const coches = [
  { id: 1, marca: "Toyota", modelo: "Corolla", precio: 20000 },
  { id: 2, marca: "Ford", modelo: "Focus", precio: 18000 }
];

---

3. Obtener datos desde el backend — fetch()

El navegador permite hacer peticiones HTTP con fetch().

Ejemplo básico

fetch("/api/coches")
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });

Versión moderna con async/await:

async function cargarDatos() {
  const response = await fetch("/api/coches");
  const data = await response.json();
  console.log(data);
}

cargarDatos();

---

4. Patrón

Todo frontend profesional sigue este patrón:

1. Obtener datos
2. Transformar datos
3. Renderizar DOM

Nunca mezclar todo en una sola función gigante.

---

5. Separación de responsabilidades

Estructura recomendada:

• load() → obtiene datos del backend
• render(data) → pinta el DOM
• setLoading() → estado de carga
• setError() → muestra errores

Este patrón es equivalente a separar DAO / Service / Controller en Java.

---

6. Renderizar datos en el DOM

Supongamos este HTML:

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Marca</th>
      <th>Modelo</th>
      <th>Precio</th>
    </tr>
  </thead>
  <tbody id="rows"></tbody>
</table>

Función para crear una fila

function filaCoche(coche) {
  const tr = document.createElement("tr");

  const tdId = document.createElement("td");
  tdId.textContent = coche.id;

  const tdMarca = document.createElement("td");
  tdMarca.textContent = coche.marca;

  const tdModelo = document.createElement("td");
  tdModelo.textContent = coche.modelo;

  const tdPrecio = document.createElement("td");
  tdPrecio.textContent = coche.precio;

  tr.append(tdId, tdMarca, tdModelo, tdPrecio);

  return tr;
}

---

Función render

function render(coches) {
  const tbody = document.getElementById("rows");
  tbody.innerHTML = "";

  coches.forEach(coche => {
    const fila = filaCoche(coche);
    tbody.append(fila);
  });
}

---

Conectar con fetch

async function load() {
  try {
    setLoading(true);

    const response = await fetch("/api/coches");
    const coches = await response.json();

    render(coches);

  } catch (error) {
    setError("Error cargando datos");
  } finally {
    setLoading(false);
  }
}

load();

---

7. Estados de la interfaz

Toda aplicación debe manejar tres estados.

Estado de carga

function setLoading(estado) {
  const status = document.getElementById("status");
  status.textContent = estado ? "Cargando..." : "";
}

---

Estado de error

function setLoading(estado) {
  const status = document.getElementById("status");
  status.textContent = estado ? "Cargando..." : "";
}

---

Estado vacío

function setLoading(estado) {
  const status = document.getElementById("status");
  status.textContent = estado ? "Cargando..." : "";
}

---

8. Transformar datos antes de renderizar

A veces el frontend necesita modificar los datos.

Ejemplo:

const cochesCaros = coches.filter(c => c.precio > 19000);
render(cochesCaros);

También puedes usar:

• map() → transformar
• filter() → filtrar
• sort() → ordenar

---

9. Eventos sobre elementos generados dinámicamente

Si el DOM se crea con JavaScript, los eventos deben añadirse también dinámicamente.

Ejemplo botón:

const btn = document.createElement("button");
btn.textContent = "Ver";

btn.addEventListener("click", () => {
  console.log("Coche:", coche.id);
});

---

10. Delegación de eventos (concepto importante)

En vez de poner un listener en cada fila:

tbody.addEventListener("click", e => {
  if (e.target.classList.contains("ver")) {
    const id = e.target.dataset.id;
    console.log("Ver coche", id);
  }
});

Esto permite manejar eventos en elementos creados dinámicamente.