Filtering through multiple parameters with array.filter

Question

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

Add your search box values, code and sample peopleArray JSON — Sojin Antony
– Sojin Antony, Commented Oct 28, 2021 at 3:44
let filteredArray = peopleArray.filter(person => person.name.includes(searchParams) || person.occupation.includes(jobSearchParams)); . you can solve this in a single line of code — Sojin Antony
– Sojin Antony, Commented Oct 28, 2021 at 3:55

Dizzy B · Accepted Answer · 2021-10-28 04:46:30Z

2

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

edited Oct 28, 2021 at 4:46

answered Oct 28, 2021 at 3:47

Dizzy B

2161 silver badge7 bronze badges

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

6 Comments

Dylan Bozarth Over a year ago

My parameters are correct, I've tested that. It will console.log exactly what I type in, and I manually set the occupation: a and typed in a and it still didn't match. I'm using a filter before a .map() could that have something to do with it?

Dizzy B Over a year ago

Remove the map function, log the result of the filter itself. If you like the results of the filter, then you can see what's going wrong with your map function.

Dylan Bozarth Over a year ago

It looks like it is the filter. Does it have anything to do with my occupation being an array?

Dizzy B Over a year ago

You can use the includes method on an array but you will require complete values, as in the cat ('cat' versus 'at') example here: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… If you require to match on partial values you can just use a filter again on the values in the array.

Dizzy B Over a year ago

@imstupidpleasehelp I have updated my original answer to cater for arrays of occupations, allowing partial search terms (still case sensitive, mind you)

|

Sabita Neupane · Accepted Answer · 2021-10-28 05:05:23Z

0

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

answered Oct 28, 2021 at 5:05

Sabita Neupane

1165 bronze badges

Collectives™ on Stack Overflow

Filtering through multiple parameters with array.filter

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related