Concatenate two arrays of objects and remove repeated data from an attribute in JavaScript?

When concatenating two arrays of objects, you often need to remove duplicates based on a specific attribute. This article demonstrates how to merge arrays while handling duplicate entries using map() and find() methods.

The Challenge

Consider two arrays of product objects where some products appear in both arrays with different properties. We want to concatenate them but prioritize data from the second array when duplicates exist.

Example: Merging Product Arrays

Let's merge two product arrays and remove duplicates based on productId:

var details1 = [
    {
        productDetails: {
            isSold: true,
            productId: 101
        }
    },
    {
        productDetails: {
            isSold: true,
            productId: 103
        }
    }
];

var details2 = [
    {
        productDetails: {
            isSold: false,
            productId: 101
        }
    }
];

var mergedDetails = details1.map(details1Object => {
    var duplicateObject = details2.find(obj => 
        obj.productDetails.productId === details1Object.productDetails.productId
    );
    return duplicateObject ? duplicateObject : details1Object;
});

console.log(mergedDetails);

[
  { productDetails: { isSold: false, productId: 101 } },
  { productDetails: { isSold: true, productId: 103 } }
]

How It Works

The solution uses map() to iterate through the first array and find() to check for duplicates:

1. map() processes each object in details1
2. find() searches details2 for matching productId
3. If a match exists, the object from details2 takes priority
4. If no match, the original object from details1 is kept

Alternative: Complete Concatenation with Deduplication

To include all unique items from both arrays:

var details1 = [
    { productDetails: { isSold: true, productId: 101 } },
    { productDetails: { isSold: true, productId: 103 } }
];

var details2 = [
    { productDetails: { isSold: false, productId: 101 } },
    { productDetails: { isSold: false, productId: 104 } }
];

// First, merge with priority to details2
var merged = details1.map(obj1 => {
    var duplicate = details2.find(obj2 => 
        obj2.productDetails.productId === obj1.productDetails.productId
    );
    return duplicate || obj1;
});

// Then add unique items from details2
details2.forEach(obj2 => {
    if (!details1.some(obj1 => 
        obj1.productDetails.productId === obj2.productDetails.productId
    )) {
        merged.push(obj2);
    }
});

console.log(merged);

[
  { productDetails: { isSold: false, productId: 101 } },
  { productDetails: { isSold: true, productId: 103 } },
  { productDetails: { isSold: false, productId: 104 } }
]

Key Points

• map() transforms each element while maintaining array length
• find() returns the first matching element or undefined
• The ternary operator ?: provides fallback logic for non-matches
• This approach gives priority to the second array when duplicates exist

Conclusion

Using map() with find() provides an elegant solution for merging arrays while handling duplicates. This pattern is particularly useful when you need to update existing records with newer data while preserving unique entries.