0

Llevo poco tiempo aprendiendo Javascript y para poder asimilar los conocimientos que estoy adquiriendo, estoy realizando un proyecto de un e-commerce. Quiero crear un filtro de búsqueda desde un input, para que me muestre solo los productos que el usuario quiera, esto lo quiero leer desde un archivo .Json que tiene todos los productos.

Les muestro solo una parte del archivo Json:

[
{
    "id": 1,
    "title": "Intel Core i5 11400",
    "price": 28190,
    "imageUrl": "../images/productos/procesadores/intel-2.jpg",
    "description": "Socket 1200 11th Gen Rocket Lake"
},
{
    "id": 2,
    "title": "Intel Core i5 11400F",
    "price": 22210,
    "imageUrl": "../images/productos/procesadores/intel-1.jpg",
    "description": "Socket 1200 11th Gen Rocket Lake"
},
{
    "id": 3,
    "title": " Intel Core i5 11600KF",
    "price": 33650,
    "imageUrl": "../images/productos/procesadores/intel-2.jpg",
    "description": "Socket 1200 11th Gen Rocket Lake"
},
{
    "id": 4,
    "title": "Intel Core i5 12400",
    "price": 37068,
    "imageUrl": "../images/productos/procesadores/intel-6.jpg",
    "description": "Socket 1700 12th Gen"
},
{
    "id": 5,
    "title": "Intel Core i7 11700K",
    "price": 55009,
    "imageUrl": "../images/productos/procesadores/intel-3.jpg",
    "description": "Socket 1200 11th Gen Rocket Lake"
}]

Esto lo llame a Js mediante un fetch:

const fetchData = async() => {
try{
    const res = await fetch("./productos.json");
    const data = await res.json(); 
    // console.log(data); 
    mostrarProductos(data);
    detectarBotones(data);  
} catch(error){
    console.log(error);
 }
}

Lo que quiero saber, es como puedo hacer para que cada vez que el usuario busque algo, aparezcan solo esos productos en pantalla. Si hay algún tutorial que puedan recomendarme si es muy larga la explicación o si tienen paciencia para explicarme, les estaría agradecido, gracias por leerme.

1 respuesta 1

0

teniendo este array de objetos

let array= [
    {
        "id": 1,
        "title": "Intel Core i5 11400",
        "price": 28190,
        "imageUrl": "../images/productos/procesadores/intel-2.jpg",
        "description": "Socket 1200 11th Gen Rocket Lake"
    },
    {
        "id": 2,
        "title": "Intel Core i5 11400F",
        "price": 22210,
        "imageUrl": "../images/productos/procesadores/intel-1.jpg",
        "description": "Socket 1200 11th Gen Rocket Lake"
    },
    {
        "id": 3,
        "title": " Intel Core i5 11600KF",
        "price": 33650,
        "imageUrl": "../images/productos/procesadores/intel-2.jpg",
        "description": "Socket 1200 11th Gen Rocket Lake"
    },
    {
        "id": 4,
        "title": "Intel Core i5 12400",
        "price": 37068,
        "imageUrl": "../images/productos/procesadores/intel-6.jpg",
        "description": "Socket 1700 12th Gen"
    },
    {
        "id": 5,
        "title": "Intel Core i7 11700K",
        "price": 55009,
        "imageUrl": "../images/productos/procesadores/intel-3.jpg",
        "description": "Socket 1200 11th Gen Rocket Lake"
    }]

la palabra que buscas o que tus usuarios pondrán para buscar será esta

 const palabraABuscar="i7"

y con la ayuda de la propiedad includes y filter tendrás un código como este

array.filter(e => e.title.includes(palabraABuscar))

esto devuelve un array con los resultados que coinciden con el filtro introducir la descripción de la imagen aquí

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.