Javascript 过滤器包含

Question

我正在尝试构建一个 React 应用程序，用于搜索在 NAME、DEPARTMENT、CAMPUS 和 TITLE 中找到的字符。因此，我已经启动并运行了应用程序，但我看到 DEPARTMENT 内的“内务处理”不会返回任何结果。

数据（卡片将包含过滤器的此数据）

{
    "ROW_NUMBER": 1,
    "PIDM": 991,
    "NAME": "Elvis Presley",
    "PHONE": "999-999-9999",
    "EMAIL": "<a href=mailto:[email protected]>test<\u002fa>",
    "CAMPUS": "Main 1",
    "DEPARTMENT": "Eng /Read /Frgn Lang/ IDS / Comm.",
    "JOBTITLE": null,
    "SEARCHTYPE": null,
    "SEARCHHEADER": null
  },
  {
    "ROW_NUMBER": 2,
    "PIDM": 992,
    "NAME": "James Dean",
    "PHONE": "999-999-9999",
    "EMAIL": "<a href=mailto:[email protected]>test<\u002fa>",
    "CAMPUS": "Main 2",
    "DEPARTMENT": "Instructional Resources",
    "JOBTITLE": "Lead Librarian-Systems",
    "SEARCHTYPE": null,
    "SEARCHHEADER": null
  },
  {
    "ROW_NUMBER": 3,
    "PIDM": 993,
    "NAME": "Marilyn Monroe",
    "PHONE": "999-999-9999",
    "EMAIL": "<a href=mailto:[email protected]>test<\u002fa>",
    "CAMPUS": "Main 3",
    "DEPARTMENT": "Housekeeping",
    "JOBTITLE": "Custodian",
    "SEARCHTYPE": null,
    "SEARCHHEADER": null
  }

FILTER（CAMPUS 或 JOBTITLE 可能为空。）

const onChange = (event) => {

    if (!event.target.value) return setSearchResults(cards);

    const resultsArray = cards.filter((card) => (card.NAME.toLowerCase().includes(event.target.value.toLowerCase()) ||
                                                 card.DEPARTMENT.toLowerCase().includes(event.target.value.toLowerCase()) ||
                                                (!card.CAMPUS) ? card.NAME.toLowerCase().includes(event.target.value.toLowerCase()) : card.CAMPUS.toLowerCase().includes(event.target.value.toLowerCase()) ||
                                                (!card.JOBTITLE) ? card.NAME.toLowerCase().includes(event.target.value.toLowerCase()) : card.JOBTITLE.toLowerCase().includes(event.target.value.toLowerCase()))
    );


    setSearchResults(resultsArray)

  }

搜索

<input id='SearchText' type="text" onChange={onChange} className={`form-control ${utilStyles.inputField} ${utilStyles.inputPadding}`} name="SearchText" placeholder="Search Last Name; First Name; Campus; Deparment....." />
              

那么，我做错了什么？

Answer 1

您可以使用已知字段列表与

Array.prototype.some

调用相结合来过滤记录。

const main = () => {
  const fields = ['NAME', 'CAMPUS', 'DEPARTMENT', 'JOBTITLE'];
  const query = 'housekeeping';
  const filterd = filterData(data, fields, query);
  console.log(filterd);
};

const filterData = (data, fields, query) => {
  const term = query.toLowerCase();
  return data.filter(record =>
    fields.some(field => record[field]?.toLowerCase().includes(term)));
};

const data = [{
  "ROW_NUMBER": 1,
  "PIDM": 991,
  "NAME": "Elvis Presley",
  "PHONE": "999-999-9999",
  "EMAIL": "<a href=mailto:[email protected]>test<\u002fa>",
  "CAMPUS": "Main 1",
  "DEPARTMENT": "Eng /Read /Frgn Lang/ IDS / Comm.",
  "JOBTITLE": null,
  "SEARCHTYPE": null,
  "SEARCHHEADER": null
}, {
  "ROW_NUMBER": 2,
  "PIDM": 992,
  "NAME": "James Dean",
  "PHONE": "999-999-9999",
  "EMAIL": "<a href=mailto:[email protected]>test<\u002fa>",
  "CAMPUS": "Main 2",
  "DEPARTMENT": "Instructional Resources",
  "JOBTITLE": "Lead Librarian-Systems",
  "SEARCHTYPE": null,
  "SEARCHHEADER": null
}, {
  "ROW_NUMBER": 3,
  "PIDM": 993,
  "NAME": "Marilyn Monroe",
  "PHONE": "999-999-9999",
  "EMAIL": "<a href=mailto:[email protected]>test<\u002fa>",
  "CAMPUS": "Main 3",
  "DEPARTMENT": "Housekeeping",
  "JOBTITLE": "Custodian",
  "SEARCHTYPE": null,
  "SEARCHHEADER": null
}];

main();

.as-console-wrapper { top: 0; max-height: 100% !important; }