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

Question

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

student.tags.filter is going to return always an array which is truthy, maybe you should add .length at the end of the filter in order to use it inside the condition? — Francesco Vattiato
– Francesco Vattiato, Commented Dec 9, 2021 at 0:24
do you need to match the full text or not necessary? you can leverage the regexp pattern to this. — cute_programmer
– cute_programmer, Commented Dec 9, 2021 at 0:24
@cute_programmer no its supposed to filter as you type (so if i type "F" all entries with "F" should populate and so on) — Eric Pezzulo
– Eric Pezzulo, Commented Dec 9, 2021 at 0:26
@FrancescoVattiato so your saying add .length like student.tags.filter((tag) => { return tag.toLowerCase().includes(tagTerm.toLowerCase()); }).length? — Eric Pezzulo
– Eric Pezzulo, Commented Dec 9, 2021 at 0:28
If I understand the last sentence in the question correctly: The search logic is flawed. You currently have an exclusive || that short circuits if the first test passes. ie. NAME || TAG - will match just NAME or just TAG but you have no code to match NAME and TAG. You'll need a conditional for the two search logics. — Randy Casburn
– Randy Casburn, Commented Dec 9, 2021 at 0:37

cute_programmer · Accepted Answer · 2021-12-09 00:43:23Z

1

you can try this

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

answered Dec 9, 2021 at 0:43

cute_programmer

3723 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Eric Pezzulo Over a year ago

for some reason that breaks something in my StudentContext.js file Objects are not valid as a React child

cute_programmer Over a year ago

that error is not related to my answer. I think that error is when you return an invalid element to render.

Eric Pezzulo Over a year ago

Yes, its strange that it only happens why i try to use that code, I'm not sure why

Eric Pezzulo Over a year ago

So this actually works! I guess I was really tired last night and didn't realize I was rendering just {results}... not {results.map((i)-> {i.thing}}

cute_programmer Over a year ago

glad you got it working :)

Francesco Vattiato · Accepted Answer · 2021-12-09 01:11:01Z

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

I'm getting the same functionality as I had originally with that. Its still filtering for only the name and ignoring the tag filtering :/

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related