How to Filter an Array of Objects Based on Multiple Properties in JavaScript ?

Filtering an array of objects based on multiple properties is a common task in JavaScript. It allows us to selectively extract items from an array that satisfy specific conditions. We will explore different approaches to achieve this task.

These are the following approaches:

Approach 1: Using the filter() Method

The filter() method is a built-in array method in JavaScript that creates a new array with elements that pass the provided function’s test.

Example: This example shows the filter of an array by using the filter() method in JavaScript.

JavaScript

// Sample array of objects
const data = [
    { id: 1, name: 'John', age: 25 },
    { id: 2, name: 'Jane', age: 30 },
    { id: 3, name: 'Doe', age: 25 },
];

// Filtering based on multiple properties
const filteredData = data.filter(item =>
    item.age === 25 && item.name === 'John');
console.log(filteredData);

Output

[ { id: 1, name: 'John', age: 25 } ]

Approach 2: Using a for Loop

A traditional for loop allows explicit control over the filtering process, iterating through each object and applying the specified conditions. we will be using the for loop and by using if else we will check for the condition and add the true values into the newly formed array.

Example: This example shows the use of the above approach.

JavaScript

// Sample array of objects
const data = [
    { id: 1, name: 'John', age: 25 },
    { id: 2, name: 'Jane', age: 30 },
    { id: 3, name: 'Doe', age: 25 },
];

// Filtering based on multiple
// properties using a for loop
const filteredData = [];
for (let i = 0; i < data.length; i++) {
    if (data[i].age === 25 && data[i].name === 'John') {
        filteredData.push(data[i]);
    }
}
console.log(filteredData);

Output

[ { id: 1, name: 'John', age: 25 } ]

Approach 3: Using Array.from() and filter()

The combination of Array.from() and filter() allows for a concise method of filtering based on multiple properties. we will filter the array by the use of the filter() method and then we will make an array of those values by the use of the Array.from() method.

Example: This example shows the use of the above approach.

JavaScript

// Sample array of objects
const data = [
    { id: 1, name: 'John', age: 25 },
    { id: 2, name: 'Jane', age: 30 },
    { id: 3, name: 'Doe', age: 25 },
];

// Filtering based on multiple properties
// using Array.from() and filter()
const filteredData = Array.from(data).filter(item =>
    item.age === 25 && item.name === 'John');
console.log(filteredData);

Output

[ { id: 1, name: 'John', age: 25 } ]

Approach 4: Using reduce() method

The reduce() method can be employed to iteratively build an array of objects that meet the specified conditions. we will reduce the original array by filtering it to according to the our requirement.

Example: This example shows the use of the above approach.

JavaScript

const data = [
    { id: 1, name: 'John', age: 25 },
    { id: 2, name: 'Jane', age: 30 },
    { id: 3, name: 'Doe', age: 25 },
];

// Filtering based on multiple
// properties using reduce()
const filteredData = data.reduce((accumulator, item) => {
    if (item.age === 25 && item.name === 'John') {
        accumulator.push(item);
    }
    return accumulator;
}, []);
console.log(filteredData);

Output

[ { id: 1, name: 'John', age: 25 } ]

Approach 5: Using forEach() and filter()

Combining forEach() and filter() provides a straightforward approach to filter objects based on multiple properties. we will use foreach to iterate through the array and using filter method to filter the element of the array based on the condition. By filtering the element we are pushing that element into the new array.

Example: This example shows the use of the above approach.

JavaScript

const data = [
    { id: 1, name: 'John', age: 25 },
    { id: 2, name: 'Jane', age: 30 },
    { id: 3, name: 'Doe', age: 25 },
];

// Filtering based on multiple
// properties using forEach() and filter()
const filteredData = [];
data.forEach(item => {
    if (item.age === 25 && item.name === 'John') {
        filteredData.push(item);
    }
});
console.log(filteredData);

Output

[ { id: 1, name: 'John', age: 25 } ]

Approach 6: Using Array.filter() and Object.entries()

Utilizing Array.filter() along with Object.entries() provides a concise method of filtering objects based on multiple properties. We are filtering the elements of the array based on the given condition and by the use of the Object.entries we are adding the filtered elements into it.

Example: This example shows the use of Array.filter() and Object.entries() method for filtering the array and adding element to to the object.

JavaScript

const data = [
    { id: 1, name: 'John', age: 25 },
    { id: 2, name: 'Jane', age: 30 },
    { id: 3, name: 'Doe', age: 25 },
];

// Filtering based on multiple properties
// using Array.filter() and Object.entries()
const filterConditions = { age: 25, name: 'John' };
const filteredData = data.filter(item =>
    Object.entries(filterConditions)
        .every(([key, value]) => item[key] === value)
);
console.log(filteredData);

Output

[ { id: 1, name: 'John', age: 25 } ]

Approach 7: Using Array.filter() and Object.keys()

Employing Array.filter() with Object.keys() enables filtering based on multiple properties with simplicity and clarity. In this approach, we are going to filter the given array by the use of the Array.flter() method and adding them into the object using Object.keys() method and printing the final array of the object into the console.

Example: This example shows the use of the above approach.

JavaScript

const data = [
    { id: 1, name: 'John', age: 25 },
    { id: 2, name: 'Jane', age: 30 },
    { id: 3, name: 'Doe', age: 25 },
];

// Filtering based on multiple properties
// using Array.filter() and Object.keys()
const filterConditions = { age: 25, name: 'John' };
const filteredData = data.filter(item =>
    Object.keys(filterConditions)
        .every(key => item[key] === filterConditions[key])
);
console.log(filteredData);

Output

[ { id: 1, name: 'John', age: 25 } ]