Mi aplicación no filtraba adecuadamente los videos, me seguía arrojando toda la lista de videos por lo que segui los siguiente pasos:
Actualiza json -server
npm update json-server
Como no me funcionó, siguiente paso:
Verifica el Backend
Asegúrate de que el endpoint que estás usando (http://localhost:3001/videos) pueda filtrar correctamente los resultados con el parámetro q. Si estás usando una herramienta como JSON Server, este soporte ya está integrado. Por ejemplo, el servidor debería devolver solo los videos que contienen "flexbox" en alguna propiedad (como titulo) al usar esta consulta:
GET http://localhost:3001/videos?q=flexbox
Prueba este enlace en tu navegador o una herramienta como Postman para confirmar que el servidor devuelve datos filtrados.
Una vez que comprobé que efectivamente por alguna razón el backend no filtraba fui al siguiente paso:
Agrega un Filtro en el Frontend
Si el backend no puede realizar el filtro, puedes hacerlo manualmente en el frontend. Filtra el array busqueda antes de generar las tarjetas con crearCard. Ejemplo:
// Filtrar manualmente en el Frontend
const resultadosFiltrados = busqueda.filter(video =>
video.titulo.toLowerCase().includes(datosDeBusqueda.toLowerCase())
);
Luego, usa resultadosFiltrados para construir las tarjetas:
resultadosFiltrados.forEach(elemento =>
listaDeBusqueda.appendChild(crearCard(elemento.titulo, elemento.descripcion, elemento.url, elemento.imagen))
);
Y asi fue como logré que filtrará videos mi aplicación, espero les sea de utilidad.
