不断收到 Uncaught TypeError: data.filter is not a function on my search bar filter答案

【问题标题】：Keep getting Uncaught TypeError: data.filter is not a function on my search bar filter不断收到 Uncaught TypeError: data.filter is not a function on my search bar filter
【发布时间】：2021-03-18 03:04:04
【问题描述】：

每当我尝试在搜索栏中输入输入时，它都会返回 data.filter 不是函数错误。坚持了几天，我可能只是不知道一些基本规则lol

这是我的搜索栏功能的 JS、JSON 和 HTML

const searchBar = document.getElementById('myInput')

let data = [];
console.log(searchBar)

searchBar.addEventListener('keyup', e => {
const searchTarg = e.target.value.toLowerCase();

const searchFilter = data.filter(info => {
return (

    info.fields.toLowerCase().includes(searchTarg) ||
    info.title.toLowerCase().includes(searchTarg)

)
})
displayProducts(searchFilter)
 });

{
  "items": [
    {
      "sys": { "id": "1" },
      "fields": {
        "title": "queen panel bed",
        "price": 10.99,
        "image": { "fields": { "file": { "url": "./images/product-1.jpeg" } } }
      }
    },
    {
      "sys": { "id": "2" },
      "fields": {
        "title": "king panel bed",
        "price": 12.99,
        "image": { "fields": { "file": { "url": "./images/product-2.jpeg" } } }
      }
    },
    {
      "sys": { "id": "3" },
      "fields": {
        "title": "single panel bed",
        "price": 12.99,
        "image": { "fields": { "file": { "url": "./images/product-3.jpeg" } } }
      }
    }
}


<input type="text" id="myInput" onkeyup="navSearch()" placeholder="Search for names..">

    <ul id="myUL">

      <li><a href="#">Adele</a></li>
      <li><a href="#">Agnes</a></li>

      <li><a href="#">Billy</a></li>
      <li><a href="#">Bob</a></li>

      <li><a href="#">Calvin</a></li>
      <li><a href="#">Christina</a></li>
      <li><a href="#">Cindy</a></li>
    </ul>

我是根据很多教程做的，可以链接我在搜索栏上看过的那个

【问题讨论】：

您是否会在代码中的其他位置覆盖data？
data 不是一个数组，它是一个对象。改用data["items"].filter(
抱歉我的回复太晚了！我试过了，然后得到了earring.js:33 Uncaught TypeError: e.target.value is not a function at HTMLInputElement.<anonymous>，但至少看起来像是进步了哈哈

标签： javascript arrays json filter searchbar

【解决方案1】：

onkeyup 函数不需要添加任何事件监听器，可以通过 navSearch 函数进行搜索

<!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>Document</title>
  </head>
  <body>
    <input
      type="text"
      id="myInput"
      onkeyup="navSearch()"
      placeholder="Search for names.."
    />

    <ul id="myUL">
      <li><a href="#">Adele</a></li>
      <li><a href="#">Agnes</a></li>

      <li><a href="#">Billy</a></li>
      <li><a href="#">Bob</a></li>

      <li><a href="#">Calvin</a></li>
      <li><a href="#">Christina</a></li>
      <li><a href="#">Cindy</a></li>
    </ul>
    <script>
      let data = [
        {
          sys: { id: "1" },
          fields: {
            title: "queen panel bed",
            price: 10.99,
            image: { fields: { file: { url: "./images/product-1.jpeg" } } },
          },
        },
        {
          sys: { id: "2" },
          fields: {
            title: "king panel bed",
            price: 12.99,
            image: { fields: { file: { url: "./images/product-2.jpeg" } } },
          },
        },
        {
          sys: { id: "3" },
          fields: {
            title: "single panel bed",
            price: 12.99,
            image: { fields: { file: { url: "./images/product-3.jpeg" } } },
          },
        },
      ];

      function navSearch() {
        const searchBar = document.getElementById("myInput");
        const searchTarg = searchBar.value;
        const searchFilter = data.filter((info) => {
          
          return info.fields.title.toLowerCase().includes(searchTarg);
        });
        console.log(searchFilter);
      }
    </script>
  </body>
</html>

【讨论】：