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.

xxxxxxxxxx

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.

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

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