Filtering through multiple parameters with array.filter-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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