Filtering (searching) for two values (search criteria) in Javascript-CodePudding

I'm trying to set up an application that takes two search criteria (Name and/or Tag). I have the dynamic search set up for the search by name. But I can't filter further into the search for the tag name. How do I go about setting up a dynamic search for 2 values. In my case you should be able to search by name && tag or just name or just 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());
      })
    );
  });

This is what one entry of the api data looks like this :

{
    city: "Fushë-Muhurr"

    company: "Yadel"

    email: "[email protected]"

    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" ]
}

I'm linking my githubo repo here if anyone wants to take a look at it (It's a very small project): https://github.com/EricPezzulo/HatchwaysFrontendAssessment

CodePudding user response：

you can try this

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

CodePudding user response：

As mentioned in the comments, you're trying to filter through both or just one of them.

The following code should resume what you have been asking for

const studentsArray = [{
    city: "Fushë-Muhurr",
    company: "Yadel",
    email: "[email protected]",
    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: "[email protected]",
    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})