How to merge array objects into one object in JavaScript

JavaScript

In this post we will learn How to merge array objects into one object in JavaScript by using some methods like concat(), map(), reduce(), and spread operator with examples.

1. array.concat() to merge objects into one object

The array.concat() merge two or more arrays and returns a new array without making a change in the existing array. In this example, we are using array.concat() to merge objects into a single object.

let Employee = {'Empdetails':
[[{Empname: 'John', salary: 60000,EmpID:1,Dep:'Admin'},
    {Empname: 'jack', salary: 50000,EmpID:2,Dep:'IT'}],
    
    [{Empname: 'Racx', salary: 60000,EmpID:3,Dep:'IT'},
    {Empname: 'Max', salary: 70000,EmpID:4,Dep:'IT'},
    {Empname: 'Robin', salary: 80000,EmpID:5,Dep:'IT'}]]};


var result = [].concat.apply([],Object.values(Employee.Empdetails));
console.log(result);

Output

[
  { Empname: 'John', salary: 60000, EmpID: 1, Dep: 'Admin' },
  { Empname: 'jack', salary: 50000, EmpID: 2, Dep: 'IT' },
  { Empname: 'Racx', salary: 60000, EmpID: 4, Dep: 'IT' },
  { Empname: 'Max', salary: 70000, EmpID: 5, Dep: 'IT' },
  { Empname: 'Robin', salary: 80000, EmpID: 5, Dep: 'IT' }
]

2. array.Map() to merge objects into one object

The array.map() method is iterated over the element of the array and modifies elements of the array by applying some operation and returning the modified element as a new array.

In this example, we are using map() along with the flat() method, the array.flat() method create a new array by joining all the elements of the sub-array recursively up to the given length.

let Employee = {'Empdetails':
[[{Empname: 'John', salary: 60000,EmpID:1,Dep:'Admin'},
    {Empname: 'jack', salary: 50000,EmpID:2,Dep:'IT'}],
    
    [{Empname: 'Racx', salary: 60000,EmpID:3,Dep:'IT'},
    {Empname: 'Max', salary: 70000,EmpID:4,Dep:'IT'},
    {Empname: 'Robin', salary: 80000,EmpID:5,Dep:'IT'}]]};


var Empres = Employee.Empdetails.map(o => o).flat();

console.log(Empres)

Output

[
  { Empname: 'John', salary: 60000, EmpID: 1, Dep: 'Admin' },
  { Empname: 'jack', salary: 50000, EmpID: 2, Dep: 'IT' },
  { Empname: 'Racx', salary: 60000, EmpID: 3, Dep: 'IT' },
  { Empname: 'Max', salary: 70000, EmpID: 4, Dep: 'IT' },
  { Empname: 'Robin', salary: 80000, EmpID: 5, Dep: 'IT' }
]

3. reduce() to merge objects into one object

In this Javascript program example we are merging objects into one object to merge multiple objects into a single we are using the array.reduce() method that runs a callback function on each element of the array and returns single accumulated values. 

//javascript program to merge objects into one object


let Employee = {'Empdetails':
[[{Empname: 'John', salary: 60000,EmpID:1,Dep:'Admin'},
    {Empname: 'jack', salary: 50000,EmpID:2,Dep:'IT'}],
    
    [{Empname: 'Racx', salary: 60000,EmpID:3,Dep:'IT'},
    {Empname: 'Max', salary: 70000,EmpID:4,Dep:'IT'},
    {Empname: 'Robin', salary: 80000,EmpID:5,Dep:'IT'}]]};



var Empres = Employee.Empdetails.reduce((accumulator, obj) => [...accumulator, ...obj], []);
console.log(Empres);

Output

[
  { Empname: 'John', salary: 60000, EmpID: 1, Dep: 'Admin' },
  { Empname: 'jack', salary: 50000, EmpID: 2, Dep: 'IT' },
  { Empname: 'Racx', salary: 60000, EmpID: 3, Dep: 'IT' },
  { Empname: 'Max', salary: 70000, EmpID: 4, Dep: 'IT' },
  { Empname: 'Robin', salary: 80000, EmpID: 5, Dep: 'IT' }
]

4. Spread operator to merge objects into one object

The spread operator is a new operator introduced in ES6 Standard of JavaScript, It is represented by three dots(…). It takes an array, string, map, set, and spread its elements.

In this example, we are using iterating over the objects and on each iteration push key-value pair in an array of an object into a new defined array to create a single object from multiple objects.

let Employee = {'Empdetails':
[[{Empname: 'John', salary: 60000,EmpID:1,Dep:'Admin'},
    {Empname: 'jack', salary: 50000,EmpID:2,Dep:'IT'}],
    
    [{Empname: 'Racx', salary: 60000,EmpID:3,Dep:'IT'},
    {Empname: 'Max', salary: 70000,EmpID:4,Dep:'IT'},
    {Empname: 'Robin', salary: 80000,EmpID:5,Dep:'IT'}]]};



var resArray = [];
for(var data of Employee.Empdetails){
  resArray.push(...data);
}
console.log(resArray);

Output

[
  { Empname: 'John', salary: 60000, EmpID: 1, Dep: 'Admin' },
  { Empname: 'jack', salary: 50000, EmpID: 2, Dep: 'IT' },
  { Empname: 'Racx', salary: 60000, EmpID: 3, Dep: 'IT' },
  { Empname: 'Max', salary: 70000, EmpID: 4, Dep: 'IT' },
  { Empname: 'Robin', salary: 80000, EmpID: 5, Dep: 'IT' }
]

Summary

In this post we have learned how to merge objects into a single object by using method concat(), map(), reduce(), and spread operator with example.

Related Posts