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;"
}
]