JavaScript - merge objects in array with the same keys

In this article, we would like to show you how to merge objects in an array with the same keys in JavaScript.

To solve the problem, in the example below we use the following methods:

1. forEach() - to iterate over all objects inside array,
2. filter() - to check if an object with a given type property value already exists,
3. concat() - if an object with a given type already exists, the current object values are added to it using concat() method.
4. additionally, we use typeof operator to check if values contain a single value and convert it to an array when necessary.

Practical example

// ONLINE-RUNNER:browser;

const array = [
    { type: 1, values: 'a' },
    { type: 1, values: ['b', 'c'] },
    { type: 2, values: 'd' }
];

const result = [];

array.forEach((object) => {
    const existing = result.filter((item) => item.type == object.type);
    if (existing.length) {
        const existingIndex = result.indexOf(existing[0]);
        result[existingIndex].values = result[existingIndex].values.concat(object.values);
    } else {
        if (typeof object.values == 'string') object.values = [object.values];
        result.push(object);
    }
});

console.log(JSON.stringify(result));

Note:

If you want values to be an array of numbers instead of strings, just change the condition in line 15 from 'string' to 'number' type.

See also

1. JavaScript - group / grouping array items with reduce method

References

1. Array.prototype.forEach() - JavaScript | MDN
2. Array.prototype.filter() - JavaScript | MDN
3. Array.prototype.indexOf() - JavaScript | MDN
4. Array.prototype.concat() - JavaScript | MDN