He estado tratando de resolver esto, pero no sé lo que me estoy perdiendo.
Tengo una tabla donde obtengo información de API usando fetch. Quiero que la entrada filtre a los usuarios mientras escribo en ella. Esto es lo que tengo hasta ahora, si es posible quiero seguir usando filter() y Javascript puro. Creo que mi problema es no saber acceder a la información de las filas
const listItems = document.querySelectorAll("#data");
Esta línea parece no funcionar como yo quiero. Aquí está el código:
fetch( "https://gist.githubusercontent.com/SuecoMarcus/a77af69f0e84c3125a5c0cf43a3ac41b/raw/918cd058b7e2286a36e79643c63a5ebca097d7c8/users.json" ).then((response) => { response.json().then((data) => { let row = ""; data.forEach((itemData) => { row += "<tr>"; row += "<td>" + itemData.id + "</td>"; row += "<td>" + itemData.firstname + "</td>"; row += "<td>" + itemData.lastname + "</td>"; row += "<td>" + itemData.age + "</td></tr>"; }); document.querySelector("#data").innerHTML = row; }); }); document.querySelector("#search-input").addEventListener("input", filterTable); function filterTable(e) { const searchInput = document.querySelector("#search-input"); const filter = searchInput.value.toLowerCase(); const listItems = document.querySelectorAll("#data"); listItems.forEach((item) => { let text = item.textContent; if (text.toLowerCase().includes(filter.toLowerCase())) { item.style.display = ""; } else { item.style.display = "none"; } }); } <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <title>Hack Academy - Proyecto Base</title> <!-- CSS de Bootstrap --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous" /> <!-- CSS Propio --> <link rel="stylesheet" href="css/styles.css" /> </head> <body> <div class="container mt-5" id="app"> <input style="width: inherit" id="search-input" placeholder="Ingresar texto a buscar... " type="search" /> <table class="table table-search"> <thead> <tr> <th>ID</th> <th>Nombre</th> <th>Apellido</th> <th>Edad</th> </tr> </thead> <tbody id="data"></tbody> </table> </div> <!-- JS de Bootstrap --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous" ></script> <!-- JS Propio --> <script src="js/app.js"></script> </body> </html>const listItems = document.querySelectorAll("#data"); selecciona la tabla como un todo en lugar de las filas de una sola tabla. Si especifica #data > tr , obtendrá las filas individuales en su lugar y podrá iterar a través de ellas. Prueba esto:
fetch( "https://gist.githubusercontent.com/SuecoMarcus/a77af69f0e84c3125a5c0cf43a3ac41b/raw/918cd058b7e2286a36e79643c63a5ebca097d7c8/users.json" ).then((response) => { response.json().then((data) => { let row = ""; data.forEach((itemData) => { row += "<tr>"; row += "<td>" + itemData.id + "</td>"; row += "<td>" + itemData.firstname + "</td>"; row += "<td>" + itemData.lastname + "</td>"; row += "<td>" + itemData.age + "</td></tr>"; }); document.querySelector("#data").innerHTML = row; }); }); document.querySelector("#search-input").addEventListener("input", filterTable); function filterTable(e) { const searchInput = document.querySelector("#search-input"); const filter = searchInput.value.toLowerCase(); const listItems = document.querySelectorAll("#data > tr"); listItems.forEach((item) => { let text = item.textContent; if (text.toLowerCase().includes(filter.toLowerCase())) { item.style.display = ""; } else { item.style.display = "none"; } }); } <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <title>Hack Academy - Proyecto Base</title> <!-- CSS de Bootstrap --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous" /> <!-- CSS Propio --> <link rel="stylesheet" href="css/styles.css" /> </head> <body> <div class="container mt-5" id="app"> <input style="width: inherit" id="search-input" placeholder="Ingresar texto a buscar... " type="search" /> <table class="table table-search"> <thead> <tr> <th>ID</th> <th>Nombre</th> <th>Apellido</th> <th>Edad</th> </tr> </thead> <tbody id="data"></tbody> </table> </div> <!-- JS de Bootstrap --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous" ></script> <!-- JS Propio --> <script src="js/app.js"></script> </body> </html>Resolví su problema simplemente agregando childNodes al final de querySelector("#data")
Entonces esa línea debería ser:
const listItems = document.querySelector("#data").childNodes;