JavaScript - filter array element with multiple criteria or conditions

To filter JavaScript array elements with multiple criteria or conditions, you need to call the Array object’s filter() method and write multiple validations in its callback function.

The filter criteria are added using the logical AND && or OR || operator.

Let’s see some code examples on how to filter arrays with multiple conditions.

JavaScript filter array with multiple AND (&&) conditions

Let’s say you have an array of numbers as follows:

let numbers = [3, 7, 2, 15, 4, 9, 21, 14];

Suppose you want to filter the numbers with two criteria as follows:

• The numbers must be higher than 3
• The numbers must be lower than 17

Using the Array filter() method, you can write the following code to check the value of the numbers one by one:

let numbers = [3, 7, 2, 15, 4, 9, 21, 14];

// 👇 filter the numbers with two conditions
let filteredNumbers = numbers.filter(function (currentElement) {
  return currentElement > 3 && currentElement < 17;
});

// 👇 result will be [7, 15, 4, 9, 14]
console.log(filteredNumbers);

The filter method returns a new array filled with elements that pass the test defined in the callback function.

When you have many conditions that you must satisfy with the array, you need to add the condition using the logical operator AND (&&).

JavaScript filter array with multiple OR (||) conditions

Sometimes, you may also have multiple conditions where only one of the conditions has to be satisfied.

In that case, you need to use the logical operator OR (||) instead of AND.

Here’s another example with a string type array:

let names = ["Aragorn", "Gandalf", "Frodo", "Sam"];

The filter criteria for the names array are as follows:

• The value contains the letter m
• Or the value contains the letter r

Using the filter() method, here’s the validation logic:

let names = ["Aragorn", "Gandalf", "Frodo", "Sam"];

// 👇 filter the names with two conditions using OR
let newNames = names.filter(function (name) {
  return name.contains("m") || name.contains("r");
});

// 👇 result will be ['Aragorn', 'Frodo', 'Sam']
console.log(newNames);

The names ‘Aragorn’ and ‘Frodo’ don’t contain an ’m' but they have ‘r’ so they return true and passed the test.

The name ‘Sam’ contains an ’m' so it passed the test too.

‘Gandalf’ doesn’t have both ‘r’ and ’m', so the filter excluded that name.

To summarize, you can filter a JavaScript array with multiple conditions using the following steps:

• Call the filter() method of the array
• Add the filter conditions in the callback function
• Use && for conditions that must be satisfied, and || for optional conditions

The method returns a new array with elements that match the filter criteria. The original array will be left intact.

Here’s the code snippet you can use in your project:

// 👇 REQUIRED multiple conditions
const data = arr.filter(function (element) {
  return // condition1 && condition2 && condition3...
});

// 👇 OPTIONAL multiple conditions
const data = arr.filter(function (element) {
  return // condition1 || condition2 || condition3...
});

The above code can also be used to filter an array of objects with multiple conditions. Let me show you how.

Filter array of objects with multiple values

You can filter an array of objects by testing whether the properties match a certain set of criteria or conditions.

Let’s see a practical example. Suppose you have a list of people data as follows:

let people = [
  {
    name: "Steve",
    age: 27,
    country: "America",
  },
  {
    name: "Linda",
    age: 23,
    country: "Germany",
  },
  {
    name: "Jimena",
    age: 29,
    country: "Spain",
  },
  {
    name: "Eric",
    age: 24,
    country: "England",
  },
  {
    name: "Jacob",
    age: 24,
    country: "America",
  },
];

Now you need to filter the data to only include those from America with age below 25.

Here’s how you do it:

// 👇 filter object
let newPeople = people.filter(function (obj) {
  // 👇 testing whether the properties match the criteria
  return obj.country === "America" && obj.age < 25;
});

console.log(newPeople);

Only the last element will match the filter criteria above. Here’s the result array content:

// 👇 newPeople array:
[{ name: "Jacob", age: 24, country: "America" }];

See also: JavaScript filter object type tutorial

Now you’ve learned how to filter a JavaScript array with multiple criteria or conditions. Nice work!