Devolver los empleos en JSON

En esta clase damos un paso más allá de las respuestas de texto y empezamos a devolver datos reales desde nuestra API.

Hasta ahora hemos trabajado con rutas simples que devolvían texto plano o HTML básico. Ahora vamos a aprender a devolver una lista de empleos en formato JSON, que es el estándar universal para la comunicación entre aplicaciones modernas (como un frontend en React y un backend en Express).

Punto de partida

Partimos de un servidor básico con Express que ya está configurado para escuchar peticiones:

import express from 'express'

const app = express()
const PORT = process.env.PORT ?? 1234

app.listen(PORT, () => {
  console.log(`Servidor levantado en http://localhost:${PORT}`)
})

Simulando los datos de empleos

Para este ejemplo, en lugar de conectar una base de datos real (que veremos más adelante), vamos a definir un array de objetos en memoria. Esto nos permite prototipar nuestra API rápidamente.

const jobs = [
  {
    id: 1,
    title: 'Frontend Developer',
    company: 'DevJobs',
    location: 'Remote'
  },
  {
    id: 2,
    title: 'Backend Developer',
    company: 'DevJobs',
    location: 'Barcelona'
  }
]

Creando la ruta para devolver JSON

Para enviar una respuesta en formato JSON, Express nos proporciona el método res.json(). Vamos a crear el endpoint /jobs:

app.get('/jobs', (req, res) => {
  // El método .json() se encarga de todo por nosotros
  return res.json(jobs)
})

¿Qué hace res.json() por debajo?

Cuando llamas a este método, Express realiza automáticamente varias tareas que antes hacíamos a mano:

1. Serialización: Convierte el objeto o array de JavaScript a una cadena de texto JSON válida (JSON.stringify).
2. Cabeceras: Configura el encabezado Content-Type: application/json; charset=utf-8.
3. Finalización: Envía los datos y cierra la conexión automáticamente.

Probando el endpoint

Si abres tu navegador o una herramienta como Postman y accedes a:

http://localhost:1234/jobs

Recibirás una respuesta estructurada como esta:

[
  {
    "id": 1,
    "title": "Frontend Developer",
    "company": "DevJobs",
    "location": "Remote"
  },
  {
    "id": 2,
    "title": "Backend Developer",
    "company": "DevJobs",
    "location": "Barcelona"
  }
]

Ventajas de este enfoque

Al usar Express para devolver JSON conseguimos:

• Código más limpio: No hay rastro de res.setHeader ni res.end.
• Menos errores: Es más difícil olvidar configurar las cabeceras correctamente.
• Estandarización: Nuestra API está lista para ser consumida por cualquier cliente (web, móvil, etc.).

Lo que hemos hecho

• ✅ Aprendimos a usar res.json() para enviar datos estructurados.
• ✅ Entendimos que Express gestiona automáticamente las cabeceras Content-Type.
• ✅ Vimos cómo simular una fuente de datos usando arrays en memoria.
• ✅ Comprobamos lo sencillo que es crear un endpoint funcional en pocos segundos.

En la siguiente clase aprenderemos cómo utilizar los parámetros dinámicos que vimos anteriormente para filtrar y buscar empleos específicos dentro de nuestra lista.