Flatten array with objects into 1 object

Question

Given input:

[{ a: 1 }, { b: 2 }, { c: 3 }]

How to return:

{ a: 1, b: 2, c: 3 }

For arrays it's not a problem with lodash but here we have array of objects.

Answer 1

Use Object.assign:

let merged = Object.assign({}, ...arr); // ES6 (2015) syntax

var merged = Object.assign.apply(Object, arr); // ES5 syntax

Note that Object.assign is not yet implemented in many environment and you might need to polyfill it (either with core-js, another polyfill or using the polyfill on MDN).

You mentioned lodash, so it's worth pointing out it comes with a _.assign function for this purpose that does the same thing:

 var merged = _.assign.apply(_, [{ a: 1 }, { b: 2 }, { c: 3 }]);

But I really recommend the new standard library way.

Answer 2

With lodash, you can use merge():

var arr = [ { a: 1 }, { b: 2 }, { c: 3 } ];
_.merge.apply(null, [{}].concat(arr));
// → { a: 1, b: 2, c: 3 }

If you're doing this in several places, you can make merge() a little more elegant by using partial() and spread():

var merge = _.spread(_.partial(_.merge, {}));
merge(arr);
// → { a: 1, b: 2, c: 3 }

Answer 3

Here is a version not using ES6 methods...

var arr = [{ a: 1 }, { b: 2 }, { c: 3 }];
var obj = {};

for(var i = 0; i < arr.length; i++) {
    var o = arr[i];
    for(var key in o) {
        if(typeof o[key] != 'function'){
            obj[key] = o[key];
        }
    }
}

console.log(obj);

fiddle: http://jsfiddle.net/yaw3wbb8/

Answer 4

You can use underscore.extend function like that:

var _ = require('underscore');
var a = [{ a: 1 }, { b: 2 }, { c: 3 }];

var result = _.extend.apply(null, a);
console.log(result); // { a: 1, b: 2, c: 3 }
console.log(a); // [ { a: 1, b: 2, c: 3 }, { b: 2 }, { c: 3 } ]

---

And to prevent modifying original array you should use

var _ = require('underscore');
var a = [{ a: 1 }, { b: 2 }, { c: 3 }];

var result = _.extend.apply(null, [{}].concat(a));
console.log(result); // { a: 1, b: 2, c: 3 }
console.log(a); // [ { a: 1 }, { b: 2 }, { c: 3 } ]

Here can test it

Answer 5

Adding to the accepted answer, a running code snippet with ES6.

let input = [{ a: 1 }, { b: 2 }, { c: 3 }]
//Get input object list with spread operator
console.log(...input)
//Get all elements in one object
console.log(Object.assign(...input))

Answer 6

I've got a neat little solution not requiring a polyfill.

var arr = [{ a: 1 }, { b: 2 }, { c: 3 }];
var object = {};

arr.map(function(obj){
    var prop = Object.getOwnPropertyNames(obj);
    object[prop] = obj[prop];
});

Hope that helps :)

Answer 7

Here is a nice usage of Object.assign with the array.prototype.reduce function:

let merged = arrOfObjs.reduce((accum, val) => {
  Object.assign(accum, val);
  return accum;
}, {})

This approach does not mutate the input array of objects, which could help you avoid difficult to troubleshoot problems.

Answer 8

You can easily flat your object to array.

function flatten(elements) {
  return elements.reduce((result, current) => {
    return result.concat(Array.isArray(current) ? flatten(current) : current);
  }, []);
};

Answer 9

6 years after this question was asked.

Object.assign is the answer (above) I like the most.

but is this also legal ?

let res = {};
[{ a: 1 }, { b: 2 }, { c: 3 }].forEach(val => {
    let key = Object.keys(val);
    console.log(key[0]);
    res[key] = val[key];
})

Answer 10

With more modern spread operator

arrOfObj.reduce( (acc, curr) => ({ ...acc, ...cur }) );

Answer 11

const data = [
  [{ a: "a" }, { b: "b" }, { c: "c" }],
  [{ d: "d" }, { e: "e" }, { f: "f" }],
  [{ g: "g" }, { h: "h" }, { i: "i" }],
];

function convertToObject(array){
  const response = {};
  for (let i = 0; i < array.length; i++) {
    const innerArray = array[i];
    for (let i = 0; i < innerArray.length; i++) {
      const object = innerArray[i];
      const keys = Object.keys(object);
      for (let j = 0; j < keys.length; j++) {
        const key = keys[j];
        response[key] = object[key];
      }
    }
  }
  return response;
}

console.log(convertToObject(data));

Answer 12

function carParts(manufacturer, model, ...parts) {
  return { manufacturer, model, ...Object.assign(...parts) };
}
console.log(
  carParts(
    "Honda",
    "2008",
    { color: "Halogen Lights" },
    { Gears: "Automatic Gears" },
    { LED: "Android LED" },
    { LED: "Android LED1" }
  )
);

This is how i have done.