Filtrado de productos por categoría con URL search params

Filtrar por categoría desde la URL es clave para respuestas rápidas y precisas en una API. Aquí verás cómo construir y enviar query params limpios con URLSearchParams en JavaScript, validar su efecto en el navegador y entender el flujo completo, desde el selector hasta la petición con fetch.

¿Cómo funciona el filtro por categoría con query params?

Usamos el verbo GET con query params para filtrar resultados en la API. El formato es claro: ?nombreParametro=valor y, si hay más filtros, se concatenan con &. Así, el filtro por categoría puede hacerse por ID o por slug, según lo admita el backend. En este caso se implementa por ID.

• Query params: se agregan después del signo de interrogación en la URL.
• Operadores clave: igual (=) para asignar valores, ampersand (&) para concatenar filtros.
• Opcionalidad: el parámetro de categoría puede o no enviarse; por eso se valida antes de incluirlo.
• Ejemplo esperado: ?categoryId=1.

La API del catálogo ya expone categorías como las de Fakestore API, y un selector de categoría dispara el filtro. Aquí se reemplaza el comportamiento moqueado del template por una llamada real con fetch.

¿Qué pasos seguir para construir la URL y los query params en JavaScript?

El patrón recomendado evita concatenar cadenas manualmente. En su lugar, se usa URLSearchParams para agregar, serializar y validar los filtros antes de anexarlos a la URL base.

// getProducts puede recibir un categoryId opcional
async function getProducts(categoryId) {
  let url = 'API V1/products';

  const filterParams = new URLSearchParams();

  if (categoryId) {
    filterParams.append('categoryId', categoryId);
  }

  if (filterParams.size > 0) {
    url = `${url}?${filterParams}`; // toString ocurre de forma implícita en el template string
  }

  const res = await fetch(url);
  return res.json();
}

• URL mutable: se usa una variable (no constante) para poder actualizarla cuando haya filtros.
• Serialización automática: ${filterParams} aplica toString implícitamente.
• Escalabilidad: agregar nuevos filtros es tan simple como otro append.

¿Cuándo usar append y size en URLSearchParams?

• Usa append para agregar pares clave–valor sin sobrescribir. Permite múltiples filtros.
• Verifica size > 0 antes de concatenar a la URL. Evita agregar el signo de interrogación cuando no hay filtros.

¿Cómo y cuándo concatenar los query params a la URL?

• Solo añade ?${filterParams} cuando existan parámetros válidos.
• Controla la URL base en una variable y actualízala según la condición.
• Mantén el primer argumento de fetch como una cadena completa y válida.

¿Cómo validar el filtro en el navegador y la API?

Desde el navegador, con el inspector y un breakpoint, es posible seguir el flujo de la función y verificar los estados de filterParams.size, la URL final y la respuesta del servidor.

• Abre Sources e identifica el archivo del repositorio de productos.
• Define la referencia global: repository = window.product repositorio.
• Ejecuta con await: repository.getProducts('1') para probar con categoryId = '1'.
• Observa filterParams.size: pasa de 0 a 1 tras el append.
• Verifica la URL final: API V1/products?categoryId=1.
• Comprueba los datos: de 53 elementos se reducen a 19 filtrados por la categoría 1.

¿Qué diferencia hay entre filtrar por ID o slug?

Ambos representan la categoría, pero con ID se usa un número (p. ej., 1) y con slug una cadena legible. Aquí se implementa el ID, pero la estructura con URLSearchParams permite agregar también el slug cuando se necesite.

• Filtro por ID: categoryId=1.
• Filtro por slug: categorySlug=ropa (misma lógica con otra clave).

Habilidades y conceptos aplicados: - Manejo de query params en GET. - Uso de URLSearchParams: append, size, toString implícito. - Construcción segura de URLs con template string. - Peticiones con fetch y validación en DevTools con breakpoints. - Integración de filtros desde un selector de categoría.

¿Listo para llevarlo a producción? Implementa el flujo completo: trae todas las categorías, crea un repositorio específico, actualiza el template para pintarlas y, al seleccionar una, filtra productos por ese ID. Cuéntame en comentarios qué problemas encontraste y cómo los resolviste.