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

我在这里添加了一个输入测试。

  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(typeof event.target.value == 'string') {
        if (items.customerName!== null)
              return items.customerName
                          .toLowerCase()
                          .includes(event.target.value.toLowerCase()); 
            } else if(typeof event.target.value === 'number' {
              return items.cusomterId === event.target.value);
            }         
      });

      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 });
    }
  };

Answer 2

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()))
);

Answer 3

嗨，我添加了一些纯Javascipt逻辑，您可以根据需要将其嵌入到react组件中。

在这里，您可以替换组件的 state 值中的 targetName 和 targetValue 。

具有切换大小写的情况将使您可以为不同类型的字段添加不同的逻辑。

const data = {
    "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"
        }
    ]
}

const targetName = 'customerId';
const targetValue = 1110000004;

callback = (value, index, array) => {

    switch (targetName) {
        case "customerName":
            return value.customerName === targetValue;
        case "customerId":
            return value.customerId === targetValue;
        default:
            return value.customerName === targetValue;
    }
}

let result = data.customerStatusInfoList.filter(callback, this);

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

3 个答案: