Merge two array of objects into single array of objects in JavaScript?

Question

I have two arrays as follows

 var arr1 = [
  {
    name: "abc"
  },
   {
    name: "xyz"
  }
  ];

var arr2 = [
  {
    age: 18
  },
   {
    age: 21
  }
 ];

I want the above to arrays to be merged like Below

arr3 =  [
  {
    name:"abc",
    age: 18
  },
   {
    name:"xyz",
    age: 21
  }
 ];

Any help would be highly encouraged

This is a fairly simple operation using a variety of different loop approaches. Show what you tried that didn't work — charlietfl, Jul 23 '19 at 15:27
Yes I tried, but not got what I exactly needed and I also searched in the internet, but not able to find anything like this. — Mani_MR, Jul 23 '19 at 15:28
Possible duplicate of [How to merge each object within arrays by index?](https://stackoverflow.com/questions/50919164/how-to-merge-each-object-within-arrays-by-index) — Heretic Monkey, Jul 23 '19 at 15:29
Then show us what you tried. Objective here is to help fix **your code** not to write it all for you — charlietfl, Jul 23 '19 at 15:29

score 0 · Accepted Answer · answered Jul 23 '19 at 15:31

If you have just two arrays, you could use the object spread operator to do something like the following:

function combine(arr1, arr2) {
  return arr1.map((obj, idx) => ({
    ...obj,
    ...arr2[idx]
  }));
}

var arr1 = [
  {
    name: "abc"
  },
   {
    name: "xyz"
  }
];

var arr2 = [
  {
    age: 18
  },
   {
    age: 21
  }
];

console.log(combine(arr1, arr2));

If you're using lodash, you can easily do this by using _.merge:

var arr1 = [
  {
    name: "abc"
  },
   {
    name: "xyz"
  }
];

var arr2 = [
  {
    age: 18
  },
   {
    age: 21
  }
];
 
console.log(_.merge(arr1, arr2));

<script src="https://unpkg.com/lodash@4.17.15/lodash.min.js"></script>

Merge two array of objects into single array of objects in JavaScript?

1 Answers1