javascript - 如何使用 JavaScript 中的过滤器根据用户输入过滤整个数组？

Question

我正在尝试使用 javascript 中的过滤器来搜索数组。以下是我的数组:-

 "customerStatusInfoList": [
            {
                "customerId": 1110000012,
                "caseStatus": "pending",
                "customerName": "Robert",
                "dateOfRequest": "2018-12-15 00:00:00.0"
            },
            {
                "customerId": 1110000004,
                "auditorName": "DcbAdmin",
                "caseStatus": "pending",
                "customerName": "Sam",
                "dateOfRequest": "2018-12-14 12:40:04.0"
            }
        ]

我正在使用以下函数来过滤数组:-

  filterTable = event => {
    console.log("event.target.value", event.target.value);
    console.log("rows", this.state.rows);

    if (event.target.value !== "") {
      let newRow = this.state.rows.filter(items => {
        console.log("item.name", items.customerName);
        if (items.customerName!== null)
          return items.customerName
            .toLowerCase()
            .includes(event.target.value.toLowerCase());
      });

      this.setState({ rows: newRow, query: event.target.value });
    } else {
      console.log("Query string is empty ", event.target.value);
      let newRow = this.state.custList;
      console.log("new row :", newRow);
      this.setState({ query: event.target.value, rows: newRow });
    }
  };

我能够过滤 customerName，但是当我尝试使用 customerId 或任何其他参数进行过滤时，我得到 customerId.includes 不是一个函数。但它适用于 customerName。如何使用 JavaScript 过滤器过滤整个表格？任何帮助或建议表示赞赏。谢谢。

Answer 1

customerId 是一个整数 - 您需要转换为字符串，例如:

return `${items.customerId}`
  .toLowerCase()
  .includes(event.target.value.toLowerCase());

顺便说一句，items 是一个令人困惑的变量名称 - 它是单个项目

此外，您可以通过分解项目来稍微简化事情，即:

let newRow = this.state.rows.filter(({customerId, customerName}) => 
  `${customerName || ''}`
    .toLowerCase()
    .includes(event.target.value.toLowerCase())
);

包含与 customerId、customerName 或 auditorName 匹配的任何行:

let newRow = this.state.rows.filter(({customerId, customerName, auditorName}) => 
  [customerId, customerName, auditorName].some(field => 
    `${field || ''}`
      .toLowerCase()
      .includes(event.target.value.toLowerCase()))
);