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: "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" ]
}
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
you can try this
const result = studentData.filter(({
firstName,
lastName,
tags
}) => new RegExp(searchTerm, 'gui').test(`${firstName} ${lastName} ${tags.join(' ')}`));
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: "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})