He llenado tarjetas en mi sitio web a través de un archivo json, que también funciona.
Imagen del archivo json analizado
Ahora me gustaría buscar en estas tarjetas a través de una barra de búsqueda, pero esto no funciona. Todavía puedo ver todas las cartas.
¿Qué estoy haciendo mal?
Código HTML
<input id="searchbar" type="text" name="search" placeholder="Search..."> <div class="row" id="divResult"></div>Guion
<script> const divRes = document.querySelector('#divResult'); myRequest = () => { let xhr = new XMLHttpRequest(); xhr.open('GET', 'files/elements.json', true); xhr.send(); xhr.onload = function() { if (xhr.readyState === xhr.DONE) { if (xhr.status != 200) { divRes.innerHTML = `Error ${xhr.status}: ${xhr.statusText}`; } else { const arrResponse = JSON.parse(xhr.responseText); divRes.innerHTML = createHTMLCard(arrResponse); } } }; xhr.onerror = function() { divRes.innerHTML = "Request failed"; }; } createHTMLCard = (arrObj) => { let res = ''; let input = document.getElementById('searchbar').value input = input.toLowerCase(); console.log(input); for (let i = 0; i < arrObj.length; i++) { let obj = arrObj[i]; if (obj.name.toLowerCase() === input) { res += `<div class="col-lg-4 col-md-6 col-sm-12"> <div class="card m-2"> <div class="card-body"> <h5 class="card-title">${obj.name}</h5> <p><strong>Prijs:</strong> ${obj.price}</p> <button id="moreInfo" class="btn btn-primary">More info</button> </div> </div> </div>`; } } return res; } document.querySelector('#searchbar').addEventListener('keyup', createHTMLCard); window.addEventListener('load', myRequest); </script>El código se actualiza, así que estoy cambiando mi respuesta anterior. Utilice el siguiente código para solucionar el problema.
<script> const divRes = document.querySelector('#divResult'); let arrResponse = []; myRequest = () => { let xhr = new XMLHttpRequest(); xhr.open('GET', 'files/elements.json', true); xhr.send(); xhr.onload = function() { if (xhr.readyState === xhr.DONE) { if (xhr.status != 200) { divRes.innerHTML = `Error ${xhr.status}: ${xhr.statusText}`; } else { arrResponse = JSON.parse(xhr.responseText); createHTMLCard(arrResponse); } } }; xhr.onerror = function() { divRes.innerHTML = "Request failed"; }; } createHTMLCard = () => { let res = ''; let input = this.value input = input.toLowerCase(); console.log(input); for (let i = 0; i < arrResponse.length; i++) { let obj = arrResponse[i]; if (obj.name.toLowerCase() === input) { res += `<div class="col-lg-4 col-md-6 col-sm-12"> <div class="card m-2"> <div class="card-body"> <h5 class="card-title">${obj.name}</h5> <p><strong>Prijs:</strong> ${obj.price}</p> <button id="moreInfo" class="btn btn-primary">More info</button> </div> </div> </div>`; } } divRes.innerHTML = res; } document.querySelector('#searchbar').addEventListener('keyup', createHTMLCard); window.addEventListener('load', myRequest); </script>Saludos, omi