Merge objects in array with similar key JavaScript

When working with arrays of objects in JavaScript, you might need to merge objects that share a common key. This is useful when consolidating data from multiple sources or restructuring existing data.

Let's say we have the following array of objects where each object has an id and various heading properties:

const arr = [
    {id: 1, h1: 'Daily tests'},
    {id: 2, h1: 'Details'},
    {id: 1, h2: 'Daily classes'},
    {id: 3, h2: 'Results'},
    {id: 2, h3: 'Admissions'},
    {id: 1, h4: 'Students'},
    {id: 2, h5: 'Alumni'},
    {id: 3, h3: 'Appreciations'},
    {id: 1, h5: 'Tiny Tots'},
    {id: 1, h6: 'Extras'},
];

console.log("Original array:");
console.log(arr);

Original array:
[
  { id: 1, h1: 'Daily tests' },
  { id: 2, h1: 'Details' },
  { id: 1, h2: 'Daily classes' },
  { id: 3, h2: 'Results' },
  { id: 2, h3: 'Admissions' },
  { id: 1, h4: 'Students' },
  { id: 2, h5: 'Alumni' },
  { id: 3, h3: 'Appreciations' },
  { id: 1, h5: 'Tiny Tots' },
  { id: 1, h6: 'Extras' }
]

Using reduce() to Merge Objects

We can use the reduce() method to merge objects with the same id into a single object. The function checks if an object with the same id already exists in the accumulator array:

const arr = [
    {id: 1, h1: 'Daily tests'},
    {id: 2, h1: 'Details'},
    {id: 1, h2: 'Daily classes'},
    {id: 3, h2: 'Results'},
    {id: 2, h3: 'Admissions'},
    {id: 1, h4: 'Students'},
    {id: 2, h5: 'Alumni'},
    {id: 3, h3: 'Appreciations'},
    {id: 1, h5: 'Tiny Tots'},
    {id: 1, h6: 'Extras'},
];

const clubArray = (arr) => {
    return arr.reduce((acc, val) => {
        const index = acc.findIndex(el => el.id === val.id);
        if(index !== -1){
            const key = Object.keys(val)[1];
            acc[index][key] = val[key];
        } else {
            acc.push(val);
        }
        return acc;
    }, []);
};

console.log("Merged array:");
console.log(clubArray(arr));

Merged array:
[
    {
        id: 1,
        h1: 'Daily tests',
        h2: 'Daily classes',
        h4: 'Students',
        h5: 'Tiny Tots',
        h6: 'Extras'
    },
    { id: 2, h1: 'Details', h3: 'Admissions', h5: 'Alumni' },
    { id: 3, h2: 'Results', h3: 'Appreciations' }
]

Alternative Approach Using Map

Here's an alternative approach using a Map for better performance when dealing with larger datasets:

const mergeObjectsById = (arr) => {
    const map = new Map();
    
    arr.forEach(obj => {
        const id = obj.id;
        if (map.has(id)) {
            Object.assign(map.get(id), obj);
        } else {
            map.set(id, {...obj});
        }
    });
    
    return Array.from(map.values());
};

console.log("Using Map approach:");
console.log(mergeObjectsById(arr));

Using Map approach:
[
    {
        id: 1,
        h1: 'Daily tests',
        h2: 'Daily classes',
        h4: 'Students',
        h5: 'Tiny Tots',
        h6: 'Extras'
    },
    { id: 2, h1: 'Details', h3: 'Admissions', h5: 'Alumni' },
    { id: 3, h2: 'Results', h3: 'Appreciations' }
]

How It Works

The reduce() approach works by:

• Using findIndex() to check if an object with the same id exists
• If found, extracting the property key (excluding 'id') and adding it to the existing object
• If not found, pushing the entire object to the accumulator array

The Map approach is more efficient as it uses hash-based lookups instead of linear searches.

Conclusion

Both methods effectively merge objects with similar keys in JavaScript arrays. Use reduce() for simple cases or Map for better performance with larger datasets.