How do I link my input to my table using pure Javascript?

January 31, 2022

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>