Issue
I have been trying to resolve this but I don't know what I'm missing.
I have a table where I get API information using fetch. I want the input to filter the users as I type on it. This is what I have so far, if it's possible I want to keep using filter() and pure Javascript. I believe my problem is not knowing how to access the information in the rows
const listItems = document.querySelectorAll("#data");
This line seems not to work the way I want it to. Here is the code:
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>Solution
const listItems = document.querySelectorAll("#data"); selects the table as whole instead of the single table rows. If you specify #data > tr, you'll get the single rows instead and can iterate through them. Try this:
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>Answered By - Jb31 Answer Checked By - Katrina (PHPFixing Volunteer)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.