在Javascript中过滤（搜索）两个值（搜索条件）答案

【问题标题】：Filtering (searching) for two values (search criteria) in Javascript在Javascript中过滤（搜索）两个值（搜索条件）
【发布时间】：2022-01-13 21:24:30
【问题描述】：

我正在尝试设置一个采用两个搜索条件（名称和/或标签）的应用程序。我为按名称搜索设置了动态搜索。但我无法进一步过滤标签名称的搜索。如何设置 2 个值的动态搜索。在我的情况下，您应该可以通过 name && tag 或 name 或 tag 进行搜索。

  const filteredResults = studentData.filter((student) => {
    const name = student.firstName + " " + student.lastName;
    return (
      name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      student.tags.filter((tag) => {
        return tag.toLowerCase().includes(tagTerm.toLowerCase());
      })
    );
  });

这是 api 数据的一个条目如下所示：

{
    city: "Fushë-Muhurr"

    company: "Yadel"

    email: "iorton0@imdb.com"

    firstName: "Ingaberg"

    grades: [ "78", "100", "92", … ]

    id: "1"

    lastName: "Orton"

    pic: "https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/voluptasdictablanditiis.jpg"

    skill: "Oracle"

    tags: [ "Tag1", "Tag2" ]
}

如果有人想查看它，我将在此处链接我的 githubo 存储库（这是一个非常小的项目）： https://github.com/EricPezzulo/HatchwaysFrontendAssessment

【问题讨论】：

student.tags.filter 将始终返回一个真实的数组，也许您应该在过滤器的末尾添加 .length 以便在条件内使用它？
需要全文匹配还是不需要？您可以利用正则表达式模式。
@cute_programmer 不应该在你输入时过滤（所以如果我输入“F”，所有带有“F”的条目都应该填充等等）
@FrancescoVattiato 所以你说添加.length 喜欢student.tags.filter((tag) => { return tag.toLowerCase().includes(tagTerm.toLowerCase()); }).length？
如果我正确理解问题中的最后一句话：搜索逻辑有缺陷。如果第一次测试通过，您目前有一个专属的|| 短路。 IE。姓名 || TAG - 将匹配 just NAME 或 just TAG，但您没有匹配 NAME and TAG 的代码。您需要两个搜索逻辑的条件。

标签： javascript arrays reactjs search

【解决方案1】：

你可以试试这个

const result = studentData.filter(({
    firstName,
    lastName,
    tags
}) => new RegExp(searchTerm, 'gui').test(`${firstName} ${lastName} ${tags.join(' ')}`));

【讨论】：

由于某种原因破坏了我的 StudentContext.js 文件中的某些内容Objects are not valid as a React child
该错误与我的回答无关。我认为这个错误是当你返回一个无效的元素来渲染时。
是的，奇怪的是为什么我会尝试使用该代码，我不知道为什么
所以这确实有效！我想我昨晚真的很累，没有意识到我只是在渲染 {results}...而不是 {results.map((i)-> {i.thing}}
很高兴你能成功 :)

【解决方案2】：

正如在 cmets 中提到的，您正试图过滤两个或其中一个。

以下代码应该恢复您一直要求的内容

const studentsArray = [{
    city: "Fushë-Muhurr",
    company: "Yadel",
    email: "iorton0@imdb.com",
    firstName: "Ingaberg",
    grades: [ "78", "100", "92"],
    id: "1",
    lastName: "Orton",
    pic: "https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/voluptasdictablanditiis.jpg",
    skill: "Oracle",
    tags: [ "Tag1", "Tag2" ],
},
{
    city: "Fushë-Muhurr",
    company: "Yadel",
    email: "iorton0@imdb.com",
    firstName: "Ingaberg",
    grades: [ "78", "100", "92"],
    id: "1",
    lastName: "Orton",
    pic: "https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/voluptasdictablanditiis.jpg",
    skill: "Oracle",
    tags: [ "Tag3", "Tag4" ],
}]

const searchTerm = ''
const tagTerm = ''

const filteredResults = studentsArray.filter((student) => {
    const name = student.firstName + ' ' +student.lastName;
    const nameIncludesSearchTerm = name.toLowerCase().includes(searchTerm.toLowerCase())
    const tagsIncludesTagTerm = student.tags.map(t=>t.toLowerCase()).includes(tagTerm.toLowerCase())
    const includesNameAndTag = nameIncludesSearchTerm && tagsIncludesTagTerm
    const includeNameOrTag = nameIncludesSearchTerm || tagsIncludesTagTerm
    return includesNameAndTag || includeNameOrTag;
  });

console.log({filteredResults})

【讨论】：

我得到的功能与我最初的功能相同。它仍然只过滤名称并忽略标签过滤：/