How to combine column values from an array of objects to a single object with string values in JavaScript

Question

I have an array that has more than one row (it can vary) as below.

const myArray = [{
    name: 'user 100', name2: 'user200', name3: 'user300',
}, {
    name: 'user 101', name2: 'user201', name3: 'user301',
}, {
    name: 'user 102', name2: 'user202', name3: 'user302',
}];

I want to combine/merge all these rows in 1 as shown below:

{
    name: 'user 100 user 101 user 102',
    name2: 'user200 user 201 user 203',
    name3: 'user300 user 301 user 303',
}

Answer 1

You could do that using Array.prototype.forEach() and Object.entries() :

 const arr = [{ name: 'user 100', name2: 'user200', name3: 'user300', }, { name: 'user 101', name2: 'user201', name3: 'user301', }, { name: 'user 102', name2: 'user202', name3: 'user302', }]; const result = {}; arr.forEach((item, index) => { Object.entries(item).map(([key, value]) => { result[key] = `${ (result[key] || '') } ${ value }`; }); }); console.log(result);

The same can be done using Array.prototype.reduce() instead of Array.prototype.forEach() :

 const arr = [{ name: 'user 100', name2: 'user200', name3: 'user300', }, { name: 'user 101', name2: 'user201', name3: 'user301', }, { name: 'user 102', name2: 'user202', name3: 'user302', }]; const combined = arr.reduce((result, item) => { Object.entries(item).map(([key, value]) => { result[key] = `${ (result[key] || '') } ${ value }`; }); return result; }, {}); console.log(combined);

Answer 2

This looks like a good case for reduce , it will loop over every element in your array letting you keep track of attributes across all elements.

prev starts out as whatever you gave in the second parameter (in our case it's {} )

next is an item from your array, starting at the 0th

Use Object.keys to loop over every attribute in your array element, adding them to the originally blank object and passing it along.

prev starts empty but after the first loop it holds all properties of element 1, second loop it has element 1 + element 2, etc until it finishes looping.

 let myArray = [ {name: 'user 100', name2: 'user200', name3: 'user300'},{name: 'user 101', name2: 'user201', name3: 'user301'}, {name: 'user 102', name2: 'user202', name3: 'user302'} ]; let combined = myArray.reduce((prev, next) => { Object.keys(next).forEach(key => { prev[key] = (prev[key]? prev[key] + ' ': '') + next[key]; }); return prev; }, {}) console.log(combined);