【问题标题】：How to filter data that I received from URL on my HTML page如何过滤从我的 HTML 页面上的 URL 收到的数据
【发布时间】：2021-10-23 06:06:57
【问题描述】：

我的 html 页面带有一个表单，用于过滤从 URL 获取的数据。无论我做什么来过滤它，我都会取回完整的数据，而不是过滤。由于我是这一切的新手，我不确定这是否是正确的方法..我想通过标题和/或动作来过滤它们

这是我的 HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="stylesheet" href="css/style.css">
    <title>ToDoList</title>
</head>
<body>

    <div class="forma">
        <form class="filter-form" id="fForm">
            <input type="text" name="title_like">

            <select name="action">
                <option value="WORK">Work</option>
                <option value="SPORT">Sport</option>
                <option value="SHOPING">Shopping</option>
                <option value="MUSIC">Music</option>
            </select>  
            <button class="submit">GO</button>

            
        </form>

        
        <div class="list" id="list"></div>
        
    </div>
    
   

    
</body>
</html>
<script src="js/ajax.js"></script>

这是我的javascript：

const getTodos = (callback) => {

    // Create an XMLHttpRequest object
const request = new XMLHttpRequest();


request.addEventListener('readystatechange', () => {

    //console.log(request, request.readyState);

    if(request.readyState === 4 && request.status === 200){

        const data = JSON.parse(request.responseText);
        callback(undefined, data);
    } else if(request.readyState === 4){

        callback('could not fetch data', undefined);

    }
});


request.open('GET', 'https://my-json-server.typicode.com/nebojsazr/todo_service/todos/');
request.send();

};

getTodos((err, data) => {

    if(err){
        console.log('cb fired')
    } else {

        
        
           //const sredjenadata = JSON.stringify(data, undefined, 2);
            document.getElementById('list').innerHTML = JSON.stringify(data, undefined, 2);
        
        
    }



});

【问题讨论】：

欢迎来到 StackOverflow！请阅读How do I ask a good question?和How to create a Minimal, Reproducible Example

标签： javascript html json filter

【解决方案1】：

让我们以现代方式重写它

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fetch Items</title>
    <script defer src="main.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <h1>Fetch Items</h1>
    <main>
      <form id="filter-form">
        <input
          type="text"
          name="search"
          id="searchbar"
          placeholder="Search Title"
        />
        <select name="category" id="category">
          <option value="WORK">Work</option>
          <option value="SPORT">Sport</option>
          <option value="SHOPPING">Shopping</option>
          <option value="MUSIC">Music</option>
        </select>
        <button type="submit">Fetch Again</button>
      </form>
      <ul id="result-list"></ul>
    </main>
  </body>
</html>

main.js

// API URL
const API_URL = `https://my-json-server.typicode.com/nebojsazr/todo_service/todos/`;
// Get all DOM elements
const resultList = document.querySelector("#result-list");
const searchbar = document.querySelector("#searchbar");
const category = document.querySelector("#category");
const filterForm = document.querySelector("#filter-form");
// Get all the results array from api
const getResults = async () => {
  try {
    resultList.innerHTML = "Loading Data...";
    const result = await fetch(API_URL);
    const data = await result.json();
    resultList.innerHTML = "";
    return data;
  } catch (error) {
    console.log(error);
  }
};
// generate output
const renderResults = (arr) =>
  arr.forEach(
    ({ title, action }) =>
      (resultList.innerHTML += `<li>${title} (${action})</li>`)
  );
// Create separate function to handle filter
const handleFilter = async () => {
  const searchText = searchbar.value;
  const selectedCategory = category.value;
  const resultsArray = await getResults();
  const arr = resultsArray
    .filter((item) =>
      item.title.toLowerCase().includes(searchText.toLowerCase())
    )
    .filter((item) =>
      item.action.toLowerCase().includes(selectedCategory.toLowerCase())
    );
  renderResults(arr);
};
// Fetch When Form submit
filterForm.addEventListener("submit", async (e) => {
  e.preventDefault();
  handleFilter();
});
// Add onchange event on searchbar
searchbar.addEventListener("change", handleFilter);
// Add onchange event on searchbar
category.addEventListener("change", handleFilter);
// Fetch all items when dom loaded
document.addEventListener("DOMContentLoaded", async () => {
  const arr = await getResults();
  renderResults(arr);
});

【讨论】：

非常感谢，这是完美的工作，正是我需要的！老实说，我认为这个过程要简单得多。是时候深入了解一切了。再次，非常感谢！
我很高兴它对你有用