Skip to content
the poor coder

javascript intersect two object arrays

Poor Man
Published
Reading time
2 min read
On this page

JavaScript: Intersect Two Object Arrays#

Have you ever needed to find the common objects between two arrays of objects in JavaScript? This is a common problem when dealing with data manipulation and analysis.

Method 1: Using the filter() method and includes()#

One way to solve this problem is to use the filter() method along with the includes() method. Here's how:

Text

const array1 = [{name: 'John', age: 20}, {name: 'Jane', age: 25}, {name: 'Bob', age: 30}];
const array2 = [{name: 'Jane', age: 25}, {name: 'Bob', age: 30}, {name: 'Joe', age: 35}];

const result = array1.filter(obj1 => {
  return array2.some(obj2 => {
    return obj1.name === obj2.name
  });
});

console.log(result); // [{name: 'Jane', age: 25}, {name: 'Bob', age: 30}]

In the above code, we first declare two arrays of objects, array1 and array2. We then use the filter() method on array1. The filter() method takes a function as an argument and returns a new array with all the elements that pass the condition of the function.

In our case, the function takes an object obj1 from array1. It then checks if array2 contains an object with the same name property as obj1 using the some() method. If it finds a matching object, it returns true, and the object obj1 is included in the new array result.

Method 2: Using the reduce() method#

Another way to find the common objects between two arrays of objects is to use the reduce() method. Here's how:

Text

const array1 = [{name: 'John', age: 20}, {name: 'Jane', age: 25}, {name: 'Bob', age: 30}];
const array2 = [{name: 'Jane', age: 25}, {name: 'Bob', age: 30}, {name: 'Joe', age: 35}];

const result = array1.reduce((accumulator, obj1) => {
  const found = array2.find(obj2 => obj1.name === obj2.name);
  if (found) {
    accumulator.push(found);
  }
  return accumulator;
}, []);

console.log(result); // [{name: 'Jane', age: 25}, {name: 'Bob', age: 30}]

In the above code, we use the reduce() method on array1. The reduce() method takes a function as an argument and returns a single value that is the accumulated result of calling the function on each element of the array.

In our case, the function takes two arguments: an accumulator and an object obj1 from array1. It then uses the find() method on array2 to check if there is an object with the same name property as obj1. If it finds a matching object, it pushes it to the accumulator array. At the end, the function returns the accumulator array, which contains all the common objects between the two arrays.

Conclusion#

There are several ways to find the common objects between two arrays of objects in JavaScript. The two methods we discussed above are just a few examples. Depending on your specific use case, there might be other methods that are more suitable. However, with these two methods, you should have a good starting point to solve this common problem.

Keep going

2023

how to sort an array

How to Sort an Array If you have an array and you want to order its elements in a specific way, you need to use a sorting algorithm. There are several sorting algorithms available, but two of the most commonly used are…

javascript2 min read
2023

jquery mobile or desktop

jQuery Mobile or Desktop? As a web developer, I have had some experience with both jQuery Mobile and jQuery Desktop. Both frameworks have their pros and cons, and which one to use really depends on the specific project…

javascript1 min read
2023

node.js folder structure

Node.js Folder Structure If you are new to Node.js, it can be daunting to create a folder structure that will work for your project. The structure you choose will depend on the size and complexity of your project. Here…

javascript1 min read
ESC