Renderizando datos con fetch

En la clase anterior aprendimos qué es fetch y cómo funciona de forma asíncrona. Ahora lo aplicamos a nuestro proyecto para traer el archivo data.json y pintar los empleos en la página. Fuente

Cargar un JSON local

fetch no solo sirve para APIs remotas: también podemos pedir archivos que tengamos en nuestro propio proyecto. En este caso, data.json vive junto a nuestro HTML y contiene la lista de trabajos.

fetch('./data.json')  .then((response) => response.json())  .then((jobs) => {    console.log('Empleos obtenidos:', jobs.length)  })

Una vez convertimos la respuesta a JSON, tenemos un array de objetos listo para usar.

Crear elementos dinámicamente

El siguiente paso es recorrer cada empleo y crear un article con toda la información.

const container = document.querySelector('.jobs-listings')fetch('./data.json') // obtenemos el archivo data.json  .then((response) => {    // convertimos la respuesta a JSON    return response.json()  })  .then((jobs) => {    // recorremos los datos y los mostramos en el DOM    jobs.forEach((job) => {      // creamos un elemento HTML <article> para cada trabajo      const article = document.createElement('article')      // añadimos la clase job-listing-card al elemento      article.className = 'job-listing-card'      // añadimos los datos al elemento      article.dataset.modalidad = job.data.modalidad      article.dataset.nivel = job.data.nivel      article.dataset.technology = job.data.technology      // añadimos el contenido HTML al elemento      article.innerHTML = `<div>          <h3>${job.titulo}</h3>          <small>${job.empresa} | ${job.ubicacion}</small>          <p>${job.descripcion}</p>        </div>        <button class="button-apply-job">Aplicar</button>`      // añadimos el elemento al contenedor      container.appendChild(article)    })  })

¿Qué hacemos con cada empleo?

• Creamos un article para mantener la estructura HTML que ya teníamos
• Añadimos clases y atributos data-* para que los filtros sigan funcionando
• Inyectamos el contenido con innerHTML
• Agregamos el article al contenedor principal

Mostrando un mensaje mientras cargamos

Podemos mejorar la experiencia del usuario mostrando un estado de carga y removiéndolo cuando terminamos.

const loading = document.querySelector('#jobs-loading')fetch('./data.json')  .then((response) => response.json())  .then((jobs) => {    if (loading) loading.remove()    if (jobs.length === 0) {      container.innerHTML = '<p>No hay empleos disponibles por ahora.</p>'      return    }    jobs.forEach((job) => {      // ... mismo código anterior    })  })  .catch((error) => {    if (loading) loading.textContent = 'No se pudieron cargar los empleos'    console.error(error)  })

¡Esto no lo hacemos en la clase en vídeo! Pero te animo a que lo hagas tu mismo para practicar.

¡Los puntos clave!

• fetch también funciona con archivos alojados en tu proyecto
• Podemos convertir la respuesta a JSON y usar los datos como un array normal
• Crear elementos dinamicamente nos permite reutilizar los filtros que ya construimos
• Añadir estados de carga y manejo de errores mejora la experiencia del usuario

Esto nos deja la base para seguir enriqueciendo la aplicación: podremos combinar fetch con filtros, paginación o incluso guardar los datos en un backend en clases futuras.