I have an array of people that I want to be able to search based of of their name. I have this working with the following code
{peopleArray
.filter((people) => {
if (
people.name.includes(searchParams)
)
{
return true;
}
return false;
})
.map((people) => (
//map the data here
I have an input that sets the value of what the user types in to be set to searchParams This is all working fine, however I want to have 2 inputs and to be able to search by both name and occupation
So I made another input to be set with jobSearchParams and updated my filter function like this
{peopleArray
.filter((people) => {
if (
people.name.includes(searchParams) || people.occupation.includes(jobSearchParams)
)
{
return true;
}
return false;
})
However the second filtering doesn't work at all. When the second input has a value the array does not change at all. I have console.log()'d to show that the input is passing the value to jobSearchParam but still the array does not change.
For more info, the peopleArray looks like this
{
name: "Bob",
occupation: ["builder", "developer"]
}
The searchBox values are set at the inputs like so
<input className="nameSearch"
placeholder="Search by Job"
value={jobSearchParam}
onInput={(e ) => setJobSearchParam(e.target.value)}
/>
It's difficult for me to read your example but I created something which does what you describe:
var people = [
{ name: "John Citizen", occupation: "Developer" },
{ name: "April O'Neill", occupation: "Teacher" }
];
search = function(name, job) {
return people.filter(person => {
return person.name.includes(name) || person.occupation.includes(job);
});
};
var resultBoth = search("John", "Teacher");
var resultJohn = search("John", "Dev");
var resultTeach = search("Nonsense", "Teach");
console.log(resultBoth);
console.log(resultJohn);
console.log(resultTeach);It is possible that just your parameters are not right, remember that it will be case-sensitive, which you can fix by calling toLower on your person.name before the includes check.
UPDATE: Modified to cater for an array of occupations per person:
var people = [
{ name: "John Citizen", occupations: ["Developer", "Event Organiser"] },
{ name: "April O'Neill", occupations: ["Teacher", "Event Organiser"] }
];
search = function(name, job) {
return people.filter(person => {
return person.name.includes(name) || person.occupations.some(occupation => occupation.includes(job));
});
};
var eventOrganisers = search("John", "Event");
var developers = search(null, "Develop")
console.log(eventOrganisers);
console.log(developers);You can get your search result this way.
const peopleArray = [
{ name: "Will Smith", occupation: ["builder", "developer"] },
{ name: "John Smith", occupation: ["Programmer", "developer"] },
{ name: "Katy Perry", occupation: ["Singer", "Programmer"] }
];
const getSearchResult = (nameSearch, jobSearchParams) => {
return peopleArray.filter((person) => {
return person.name.includes(nameSearch) || person.occupation.includes(jobSearchParams)
});
}
console.log(getSearchResult("XYZ", "Singer")) // get single result
console.log(getSearchResult("Smith", "Singer")) // get multiple result