0

Como están, tengo la pagina "productos.html" en la que quiero usar un input search para que el usuario busque un producto y los muestre en la misma pagina. Los productos se encuentran en un archivo json, en el archivo "productos.js" puedo tomar el valor del input pero no se como podría recorrer el archivo json para que muestre los productos que coincidan con el valor del input

productos.html

<div>
    <input id="searchInput" type="search">
    <button type="button" onclick="searchProduct()" required>Buscar</button>
</div>

<p id="showProduct"></p>

<script src="/js/productos.js">

He creado un fetch para obtener la información del archivo json y no se si podria usarse la función filter para buscar el producto

productos.js    

function searchProduct() {
  var product = document.getElementById("searchInput").value

  fetch('/js/files.json')
    .then(res=>res.json())
    .then(data=>{ 

})

}

Ejemplo del archivo json

[
{
  "Id": "10AV1000",
  "Marca": "FORD",
  "Tipo": "TIPO",
  "Elemento": "CORREAS TRAPEZOIDALES",
  "Modelo": "COR Ford Taunus Sierra 2.0 2.3",
  "Precio": "778.67",
  "Hora": "21.00;"
},
{
  "Id": "10AV1000",
  "Marca": "PEUGEOT",
  "Tipo": "TIPO",
  "Elemento": "CORREAS TRAPEZOIDALES",
  "Modelo": "COR Peugeot 505 SRI -",
  "Precio": "778.67",
  "Hora": "21.00;"
}
]

1 respuesta 1

0

Pues con un ciclo for lo puedes realizar si no estoy mal. Ya que tu json es un arreglo, podemos obtener la longitud de ese arreglo. Primero, asigna el resultado de fetch a una variable

let myValues = fetch('/js/files.json')
    .then(res=>res.json());
//El ultimo .then() no se para que lo tienes

Una ves asignado a una variable y convertido a json para el manejo, podemos interactuar con el

for(let i = 0; i < myValues.length; i++){
    console.log(myValues[i]);
    //Ya con esta interacción puedes hacer tu comprobación
    if(product == myValues[i]){
        console.log("Coinciden!");
    }
}

SE ME PASÓ DE LARGO

El ciclo anterior, en la condición te dará error, ya que el objeto myValue[0] no puede ser igualado al string de busqueda, tienes que hacer otra interacción para recorrer cada elemento

for(let j = 0; j < myValues[i].lenght; j++){
    //Aqui va tu comprobación
    console.log(myValues[i][j]);
}

Espero haberte ayudado, feliz día!!


Resumido

for(let i = 0; i < myValues.length; i++){
    console.log(myValues[i]);
    //Ya con esta interacción puedes hacer tu comprobación
    for(let j = 0; j < myValues[i].lenght; j++){
        //Aqui va tu comprobación
        console.log(myValues[i][j]);
        if(product == myValues[i]){
            console.log("Coinciden!");
        }
    }

}

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.