3

Estoy haciendo un buscador y no me muestra en pantalla los datos del JSON. Lo que quiero hacer es que filtre el dato y lo muestre por pantalla, pero solo sale 'producto no encontrado' como si estuviera vacío.

Ese es el único error que tengo, y en consola me muestra los datos como que la función los está tomando.

Archivo JS - main.js

const formulario = document.querySelector('#formulario'), boton = document.querySelector('#boton'), resultado = document.querySelector('#resultado')


document.addEventListener('DOMContentLoaded', () => {
    fetchData();
})

const fetchData = async () => {
// esta funcion toma los datos del JSON
    try {
        const res = await fetch('api.json'),
        data = await res.json();
    //console.log(data);
    filtrar(data)

    } catch (error) {
    console.log(error);
   }
}

const filtrar = (data) => {
console.log(data);
resultado.innerHTML = '';
const texto = formulario.value.toLowerCase();
for (let producto in fetchData) {
    let nombre = producto.title.toLowerCase();
    if (nombre.indexOf(texto) !== -1) {
        resultado.innerHTML += `
      <li>${producto.title} - ${producto.precio}</li>
      `
    }
}
if (resultado.innerHTML === '') {
    resultado.innerHTML += `<li>Producto no encontrado...</li>`
}
};

boton.addEventListener('click', filtrar);

Archivo de HTML - vantas.html

<h1>Buscador</h1>
<input type="text" id="formulario">
<button id="boton">Agregar</button>
<ul id="resultado">

</ul>

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

Archivo JSON - api.json

[
 {
    "precio": 500,
    "id": 1,
    "title": "Cafe"
 },
 {
    "precio": 300,
    "id": 2,
    "title": "Pizza"
 }
]
2
  • En tu método filtrar() creo que deberías cambiar let producto in fetchData por let producto in data. Ya que el parámetro data que recibes nunca lo usas. el 13 sep. 2021 a las 13:57
  • Si, lo intente y sigue sin funcionar. Gracias
    – Magali
    el 13 sep. 2021 a las 14:11

2 respuestas 2

2

Estás teniendo una pequeña confusión respecto a async functions.

Async functions always return a promise.

Teniendo eso en mente, tu código debe tener unos ligeros cambios. Empezando por tu método fetchData().

const fetchData = async () => {
    const res = await fetch('data.json');
    return await res.json();
}

Para que, posteriormente, en tu método filtrar() obtengas la data recibida, utilizando .then().

const filtrar = () => {
fetchData()
    .then(data => {
        resultado.innerHTML = '';
        const texto = formulario.value.toLowerCase();

        for (let producto of data) {
            let nombre = producto.title.toLowerCase();
            if (nombre.indexOf(texto) !== -1) {
                resultado.innerHTML += `
            <li>${producto.title} - ${producto.precio}</li>
            `
            }
        }
        if (resultado.innerHTML === '') {
            resultado.innerHTML += `<li>Producto no encontrado...</li>`
        }
    })
    .catch(e => {
        console.log(e);
    })
};

Básicamente, el método then():

Takes up to two arguments: callback functions for the success and failure cases of the Promise.

En este ejemplo, sólo utilizamos un callback que es para el caso de éxito.

fetchData().then(data => {...})

Ya que posteriormente utilizamos .catch().

Te recomiendo leer la documentación para entender estos conceptos a profundidad.

1
  • No tuve en cuenta el método then(), hice las modificaciones y funciona perfecto. Voy a leer la documentación. Gracias
    – Magali
    el 13 sep. 2021 a las 18:59
2

Estas teniendo varios problemas al mismo tiempo.

1: El evento DOMContentLoaded esta llamando a la funcion fetchData, luego que carga los datos se lo pasas a la function filtrar.

El problema esta en que estas usando fetchData en el for en lugar de data

Deberia ser

for (let producto in data) {
    // ....
}

2: tu evento click esta usando como handler la funcion filtrar. pero filter, recibe los datos como parametros, entonces cuando haces click lo que le estas pasando por parametro es el evento y no los datos. para solucionarlo has lo siguiente:

let data = []; // crea una variable global

const fetchData = async () => {
  // ...
}

// usa un arrow function como handler para llamar la funcion filtrar y pasarle los datos
boton.addEventListener('click', (event) => filtrar(data) );

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.