How can you merge objects in array of objects?

Question

I'm looking for the best solution to merge all objects in one array

const arrayOfObjects = [
 {name: 'Fred', surname: 'Shultz'}, {name: 'Anne', surname: 'Example'}
];

I want to achieve: {name: ['Fred', 'Anne'], surname: ['Example', 'Shultz']}

What's the best option for that (es6)? Maybe I can do something like that using lodash? Which helpers should I use?

is every object in arrayOfObjects guaranteed to have the same properties? — jtate
– jtate, Commented Oct 11, 2018 at 13:26

Nina Scholz · Accepted Answer · 2018-10-11 13:37:15Z

9

You could reduce the array by iterating the entries and collecting the values, depending of the keys.

const
    array = [{ name: 'Fred', surname: 'Shultz' }, { name: 'Anne', surname: 'Example' }],
    result = array.reduce((r, o) => {
        Object.entries(o).forEach(([k, v]) => (r[k] = r[k] || []).push(v));
        return r;
    }, Object.create(null));

console.log(result);

answered Oct 11, 2018 at 13:37

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ssc-hrep3 · Accepted Answer · 2018-10-11 13:34:13Z

7

You could do it like this:

const arrayOfObjects = [
  {name: 'Fred', surname: 'Shultz'}, {name: 'Anne', surname: 'Example'}
];

const result = {};
arrayOfObjects.forEach(item => {
  Object.keys(item).forEach(key => {
    if (!result[key]) {
      result[key] = [];
    }
    result[key].push(item[key]);
  });
});

console.log(result);

answered Oct 11, 2018 at 13:34

ssc-hrep3

16.3k8 gold badges51 silver badges96 bronze badges

Comments

georg · Accepted Answer · 2018-10-11 23:04:55Z

7

easy with lodash:

grouped = _.mapValues(arrayOfObjects[0], 
    (val, key) => _.map(arrayOfObjects, key))

pure es6

let grouped = {};

for (let obj of arrayOfObjects)
    for (let [key, val] of Object.entries(obj))
        grouped[key] = (grouped[key] || []).concat(val)

if the keys differ from item to item, you could use something like this to collect them all:

grouped = _(arrayOfObjects)
    .flatMap(_.entries)
    .groupBy(0)
    .mapValues(x => _.map(x, 1))
    .value()

edited Oct 11, 2018 at 23:04

answered Oct 11, 2018 at 13:30

georg

216k57 gold badges324 silver badges401 bronze badges

4 Comments

Akrion Over a year ago

I liked the lodash approach but it is not generic enough. It will break if any objects past the first one have different properties. e.g. {name: 'John', city: 'Miami'}

Akrion Over a year ago

Look at jsfiddle.net/akrion/tp70frm5/627. You will see in the console that first you have an undefined as last element in the surname and 2nd you have no property for city since you did mapValues on the first object and not on every in the array.

georg Over a year ago

@Akrion: yep, I see, fixed!

Koushik Chatterjee Over a year ago

@georg isn't the fixed lodash version exactly look like my answer?

ibrahim mahrir · Accepted Answer · 2018-10-11 14:03:31Z

4

You can use lodash's mergeWith like so:

const result = _.mergeWith({}, ...arrayOfObjects, (value, objValue) =>
    (value || []).concat(objValue)
);

Example:

const arrayOfObjects = [
    {name: 'Fred', surname: 'Shultz'}, {name: 'Anne', surname: 'Example'}
];

const result = _.mergeWith({}, ...arrayOfObjects, (value, objValue) =>
    (value || []).concat(objValue)
);

console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>

edited Oct 11, 2018 at 14:03

answered Oct 11, 2018 at 13:57

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

Comments

protoproto · Accepted Answer · 2018-10-11 14:12:25Z

4

Short way with array reduce:

const arrayOfObjects = [
 {name: "name1", surname: "surname1"}, {name: 'Anne', surname: 'Example'}, {name: 'name3', surname: 'Example3'}
];
/*
{name: ['Fred', 'Anne'], surname: ['Example', 'Shultz']}
*/
var result = arrayOfObjects.reduce((obj,current)=>{
    (obj['name'] = obj['name']||[]).push(current.name);
    (obj['surname'] = obj['surname']||[]).push(current.surname);
    return obj;
},{});
console.log(result);

edited Oct 11, 2018 at 14:12

answered Oct 11, 2018 at 14:06

protoproto

2,0991 gold badge15 silver badges15 bronze badges

Comments

Bergi · Accepted Answer · 2018-10-12 10:01:02Z

4

Don't make it any more complicated than it needs to be:

const arrayOfObjects = [
    {name: 'Fred', surname: 'Shultz'},
    {name: 'Anne', surname: 'Example'}
];

const result = {name:[], surname:[]};
for (const obj of arrayOfObjects)
    for (const prop in result)
        result[prop].push(obj[prop]);

I will assume that you statically know the property names that your result should have - one can't really do it dynamically anyway as that wouldn't work properly for an empty input array.

edited Oct 12, 2018 at 10:01

answered Oct 11, 2018 at 19:34

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

2 Comments

Frax Over a year ago

You can't use for..of on an object, you should use for..in instead, or iterate over Object.keys(result).

Bergi Over a year ago

@Frax Oops, that's what I meant.

Koushik Chatterjee · Accepted Answer · 2018-10-11 13:59:18Z

2

Here is a lodash approach

  _(input).flatMap(_.entries).groupBy(0).mapValues(v => _.map(v, 1)).value()

var input = [
 {name: 'Fred', surname: 'Shultz'}, {name: 'Anne', surname: 'Example'}
];

var res =   _(input).flatMap(_.entries).groupBy(0).mapValues(v => _.map(v, 1)).value()

console.log(res);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

This will take care if the objects doesn't have exactly same key sets

edited Oct 11, 2018 at 13:59

answered Oct 11, 2018 at 13:38

Koushik Chatterjee

4,1933 gold badges20 silver badges32 bronze badges

2 Comments

ssc-hrep3 Over a year ago

This results in a slightly different output structure than expected.

Koushik Chatterjee Over a year ago

@ssc-hrep3 see edit, I forget to map it to the expected type of result

Akrion · Accepted Answer · 2018-10-11 20:49:33Z

If the arrayOfObjects is set on these 2 props then it is as simple as:

const data = [{ name: 'Fred', surname: 'Shultz' }, { name: 'Anne', surname: 'Example' }]

const r = data.reduce((r,c) => 
   (r.name.push(c.name), r.surname.push(c.surname),r), {name:[], surname:[]})

console.log(r)

One reduce with an accumulator of {name:[], surname:[]} to be filled.

If you need to be more generic and work for any set of objects:

const data = [{
  name: 'Fred',
  surname: 'Shultz'
},{
  name: 'Anne',
  surname: 'Example'	
},{
  name: 'John',
  position: 'Dev' // <--- Notice different prop
}]

const result = data.reduce((r,c) => 
  (Object.keys(c).map(k => r[k] = [...r[k] || [], c[k]]), r), {})

console.log(result)

Again is just a reduce with Object.keys to do the job.

Note both approaches utilize ES6 arrow functions, array destricturing and (for the 2nd one) combining multiple operations via enclosing them in parentheses (op1,op2)

Jimi Pajala · Accepted Answer · 2018-10-27 15:35:05Z

1

This is one abroach of implementation details, written in fairly easy to understand and readable manner.

https://codesandbox.io/s/r7x16j950n

const arrayOfObjects = [
  { name: "Fred", surname: "Shultz" },
  { name: "Anne", surname: "Example" }
];

let obj = {};

arrayOfObjects.forEach(row => {
  Object.keys(row).forEach(key => {
    obj[key] = !obj[key]
      ? [row[key]]
      : [...obj[key], row[key]];
  });
});

console.log(obj);

edited Oct 27, 2018 at 15:35

answered Oct 27, 2018 at 14:31

Jimi Pajala

2,37813 silver badges21 bronze badges

Comments

Robin Zigmond · Accepted Answer · 2018-10-11 13:30:29Z

0

The following should work - uses a few ES6 helpers, but the key is Array#reduce which is in ES5.

const result = arrayOfObjects.reduce((acc, obj) => {
    for (let key in obj) {
        if (key in acc) {
            acc[key].push(obj[key]);
        }
        else {
            acc[key] = [obj[key]];
        }
    }
    return acc;
}, {});

answered Oct 11, 2018 at 13:30

Robin Zigmond

18.3k2 gold badges25 silver badges38 bronze badges

Comments

Ashikur Rahman · Accepted Answer · 2019-11-18 08:54:59Z

0

Without any library

const mergeObjectInArray=(input)=>{
const myObj={};
Object.keys(input[0]).forEach(key=>myObj[key]=input.map(inp=>inp[key]));
return myObj;
}

answered Nov 18, 2019 at 8:54

Ashikur Rahman

781 silver badge7 bronze badges

Comments

rkmsnc · Accepted Answer · 2019-11-18 18:32:12Z

with pure javascript

var myInput = [{ a: 1, b: 2, c: 3 }, { a: 2, b: 4, c: 6 }, { a: 7, b: 8, c: 9 }];
    var myArray = [];
    var myObject = {};
    function isArray(a){
        return Object.prototype.toString.call(a) === '[object Array]' ;
    }
    for (var i = 0; i < myInput.length; i++) {
        for (var key in myInput[i]) {
            if (myInput[i].hasOwnProperty(key)) {
                if (myArray.indexOf(key) === -1) {
                    myArray.push(key);
                    myObject[key] = myInput[i][key];
                } else {
                    if (myObject.hasOwnProperty(key)) {
                        newary = [];
                        if (isArray(myObject[key])) {
                            for (var i = 0; i < myObject[key].length; i++) {
                                newary.push(myObject[key][i]);
                            }
                        } else {
                            newary.push(myObject[key]);
                        }
                        newary.push(myInput[i][key]);
                        myObject[key] = newary;
                    }
                }
            }
        }
    }
    console.log(myObject);

Collectives™ on Stack Overflow

How can you merge objects in array of objects?

12 Answers 12

Comments

Comments

4 Comments

Comments

Comments

2 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

Comments

Comments

4 Comments

Comments

Comments

2 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related