Filter Array of Objects with Another Array of Objects in JavaScript

Filtering an array of objects with another array in JavaScript involves comparing and including objects based on specific criteria.

Below are the approaches to filter an array of objects with another array of objects in JavaScript:

Using filter and includes Methods

In this approach, we are using the filter method combined with includes to create a filteredArray that contains objects from mainArray whose IDs are present in filterArray.

Syntax:

let newArray = arrayToFilter.filter(item => arrayToCheck.includes(item)); 

Example: The below example uses the filter and includes Methods to Filter an array of objects with another array of objects in JavaScript.

let mainArray = [{
    id: 1,
    name: 'Sandip'
},
{
    id: 2,
    name: 'Mandip'
},
{
    id: 3,
    name: 'Praveen'
}
];

let filterArray = [{
    id: 1
},
{
    id: 3
}
];

let filteredArray = mainArray
    .filter(item => filterArray
        .map(x => x.id)
        .includes(item.id));
console.log(filteredArray);

[ { id: 1, name: 'Sandip' }, { id: 3, name: 'Praveen' } ]

Using Looping

In this approach, we are using nested loops to iterate through mainArray and filterArray, comparing IDs to create res containing objects with matching IDs from mainArray and filterArray.

Syntax:

let filteredArray = [];
for (let item of arrayToFilter) {
 if (arrayToCheck.includes(item)) {
   filteredArray.push(item);
 }
}

Example: The below example uses Looping to Filter array of objects with another array of objects in JavaScript.

let mainArray = [{
    id: 1,
    name: 'Sandip'
},
{
    id: 2,
    name: 'Mandip'
},
{
    id: 3,
    name: 'Praveen'
}
];
let filterArray = [{
    id: 1
},
{
    id: 3
}
];
let res = [];
for (let item of mainArray) {
    for (let filterItem of filterArray) {
        if (item.id === filterItem.id) {
            res.push(item);
            break;
        }
    }
}
console.log(res);

[ { id: 1, name: 'Sandip' }, { id: 3, name: 'Praveen' } ]

Using reduce Method

This approach uses the reduce method to filter mainArray by checking if each item's ID exists in filterArray.

Syntax:

let newArray = arrayToFilter.reduce((acc, item) => {
    if (arrayToCheck.some(x => x.id === item.id)) {
        acc.push(item);
    }
    return acc;
}, []);

Example: In this example the Filtered mainArray by comparing id of each item with id of items in filterArray, using reduce() and some() methods. Result stored in filteredArray.

let mainArray = [
    { id: 1, name: 'Nikunj' },
    { id: 2, name: 'Yash' },
    { id: 3, name: 'Dhruv' }
];

let filterArray = [
    { id: 1 },
    { id: 3 }
];

let filteredArray = mainArray.reduce((acc, item) => {
    if (filterArray.some(filterItem => filterItem.id === item.id)) {
        acc.push(item);
    }
    return acc;
}, []);

console.log(filteredArray);

[ { id: 1, name: 'Nikunj' }, { id: 3, name: 'Dhruv' } ]

Using Set for Efficient Filtering

In this approach, we utilize the Set data structure to efficiently filter the mainArray by creating a set of IDs from the filterArray and then filtering the mainArray based on these IDs.

Syntax:

let newArray = arrayToFilter.filter(item => setOfIds.has(item.id));

Example: The following example demonstrates how to use a Set to filter an array of objects with another array of objects in JavaScript

let mainArray = [
    { id: 1, name: 'Nikunj' },
    { id: 2, name: 'Yash' },
    { id: 3, name: 'Dhruv' }
];

let filterArray = [
    { id: 1 },
    { id: 3 }
];

let filterIds = new Set(filterArray.map(item => item.id));

let filteredArray = mainArray.filter(item => filterIds.has(item.id));

console.log(filteredArray);

[ { id: 1, name: 'Nikunj' }, { id: 3, name: 'Dhruv' } ]