How to Merge Multiple Array of Object by ID in JavaScript?

Merging multiple arrays of objects by a shared key, like ID, in JavaScript, is used when consolidating data from various sources, such as API responses or databases. This process involves combining objects that have the same key into a single object, allowing developers to manage and manipulate complex datasets more effectively.

Below are different approaches to merge arrays of objects by ID in JavaScript:

Using a Loop and Find Method

In this approach, we manually loop through one array and use the "find" method to search for a matching object in the other array based on a common ID. Once a match is found, the objects are merged into a single object. This method is easy to implement, making it ideal for small datasets. However, it can become inefficient with larger arrays due to the repeated searching within the array for each iteration.

Syntax:

let result = array1.map(obj => {
    let matchingObj = array2.find(o => o.id === obj.id);
    return matchingObj ? { ...obj, ...matchingObj } : obj;
});

Example : This code combines the users and preferences arrays by merging objects with matching id values, resulting in a unified array with combined properties.

let users = [
    { id: 1, name: 'HTML' },
    { id: 2, name: 'CSS' },
    { id: 3, name: 'JavaScript' }
];

let preferences = [
    { id: 1, popularity: 'High' },
    { id: 2, popularity: 'Medium' }
];

let mergedArray = users.map(user => {
    let preference = preferences.find(pref => pref.id === user.id);
    return preference ? { ...user, ...preference } : user;
});

console.log(mergedArray);

[
  { id: 1, name: 'HTML', popularity: 'High' },
  { id: 2, name: 'CSS', popularity: 'Medium' },
  { id: 3, name: 'JavaScript' }
]

Using reduce Method

The reduce method provides a concise and functional way to merge arrays by accumulating results during iteration. In this approach, reduce iterates over each object in the first array, using find to locate a corresponding object in the second array based on the ID. When a match is found, the two objects are merged and added to the accumulator array. After processing all elements, the final merged array is returned, offering a streamlined solution for combining objects from multiple arrays

Syntax:

let mergedArray = array1.reduce((acc, obj) => {
    let matchingObj = array2.find(o => o.id === obj.id);
    acc.push(matchingObj ? { ...obj, ...matchingObj } : obj);
    return acc;
}, []);

Example: This code uses the reduce method to merge the users and preferences arrays based on matching id properties, combining objects into a final merged array.

let users = [
    { id: 1, name: 'HTML' },
    { id: 2, name: 'CSS' },
    { id: 3, name: 'JavaScript' }
];

let preferences = [
    { id: 1, popularity: 'High' },
    { id: 2, popularity: 'Medium' }
];

let mergedArray = users.reduce((acc, user) => {
    let preference = preferences.find(pref => pref.id === user.id);
    acc.push(preference ? { ...user, ...preference } : user);
    return acc;
}, []);

console.log(mergedArray);

[
  { id: 1, name: 'HTML', popularity: 'High' },
  { id: 2, name: 'CSS', popularity: 'Medium' },
  { id: 3, name: 'JavaScript' }
]

Using map and Object.assign

In this approach, we use the map method to iterate through the first array and Object.assign to merge objects. This method is somewhat similar to the first approach but employs a different technique for merging. We use map to traverse each object in the first array. For each object, the find method is used on the second array to locate a corresponding object by ID. Object.assign then creates a new object by combining the properties of the original object and the matched object, resulting in a merged array.

Syntax:

let mergedArray = array1.map(obj => {
    let matchingObj = array2.find(o => o.id === obj.id);
    return Object.assign({}, obj, matchingObj);
});

Example: This code uses map and Object.assign to merge users and preferences arrays by combining objects with matching id values into a single object.

let users = [
    { id: 1, name: 'HTML' },
    { id: 2, name: 'CSS' },
    { id: 3, name: 'JavaScript' }
];

let preferences = [
    { id: 1, popularity: 'High' },
    { id: 2, popularity: 'Medium' }
];

let mergedArray = users.map(user => {
    let preference = preferences.find(pref => pref.id === user.id);
    return Object.assign({}, user, preference);
});

console.log(mergedArray);

[
  { id: 1, name: 'HTML', popularity: 'High' },
  { id: 2, name: 'CSS', popularity: 'Medium' },
  { id: 3, name: 'JavaScript' }
]

bug8wdqo

Follow

Improve

Article Tags :

• JavaScript
• Web Technologies
• JavaScript-Questions