Javascript: How Do you Combine Two Objects Into One

Question

I am trying to combine two object arrays using either Javascript or Jquery but it is not resulting the way I am expecting it to be. These are my array objects results:

Arry1 Results: [{"name": "2412"}, {"name": "3324"}, {"name": "8875"}]

Arry2 Results: [{"zip": "12051"}, {"zip": "54021"}, {"zip": "24521"}]

This is what I have done to push one into the other:

Array.prototype.push.apply(Arry1,Arry2);

The issue is the above code stacks them together. The object structure I am trying to get is as follows:

[ 
{
 "name": "2412",
 "zip": "12051"
},
{
 "name": "3324",
 "zip": "54021"
},
{
"name": "8875",
 "zip": "24521"
}
]

It seems like you want to "zip" the objects in the two arrays. `Arry1.map((obj, index) => ({ ...obj, ...Arry2[index] }))`? — jonrsharpe, Jan 30 '20 at 21:36
What happens if one of the arrays has a property with the same name? — Heretic Monkey, Jan 30 '20 at 21:41
`result = Arry1.map((v, i) => Object.assign({}, v, Arry2[i]));` — Jaromanda X, Jan 30 '20 at 21:41
See also [Merge 2 arrays of objects](https://stackoverflow.com/q/7146217/215552) — Heretic Monkey, Jan 30 '20 at 21:44

zfrisch · Accepted Answer · 2020-01-30T21:57:59.077

Map the arrays into each other by cloning and combining with Object.assign

let a1 = [{"name": "2412"}, {"name": "3324"}, {"name": "8875"}];

let a2 = [{"zip": "12051"}, {"zip": "54021"}, {"zip": "24521"}];

let result = a1.map((props, index) => Object.assign(props, a2[index]));

console.log(result);

Edit Based on Comment:

If this is a utility you're going to be using often with a variable number of arrays, you may consider creating a function that handles it.

    let a1 = [{"name": "2412"}, {"name": "3324"}, {"name": "8875"}],
    a2 = [{"zip": "12051"}, {"zip": "54021"}, {"zip": "24521"}],
    a3 = [{"phone": "1234"},{"phone": "3121"},{"phone": "2136"}];


function combine(first, ...arrs) {
  let result = first.map((props, index) => {
    let combined = [props];
    arrs.forEach(arr => combined.push(arr[index]));
    return Object.assign(...combined);
  })
  return result;
};


let result = combine(a1, a2, a3);
console.log(result);

Would this work with 3 object arrays as well? – Zeusox Jan 30 '20 at 21:47 — Zeusox, Jan 30 '20 at 21:47
@Zeusox I updated my answer to cover that. – zfrisch Jan 30 '20 at 21:58 — zfrisch, Jan 30 '20 at 21:58

Gangadhar Gandi · Answer 2 · 2020-01-30T21:58:30.257

1

There are multiple ways to do this. The below is one of,

let array1 = [{"name": "2412"}, {"name": "3324"}, {"name": "8875"}];
let array2 = [{"zip": "12051"}, {"zip": "54021"}, {"zip": "24521"}];
let resultArray = [];
for(let i=0; i< array1.length; i++) { // we can consider any of array1 or array 2 length
  resultArray.push({...array1[i], ...array2[i]});
}
console.log(resultArray);

OR

With Jquery, we can go like below,

let array1 = [{ name: "2412" }, { name: "3324" }, { name: "8875" }];
let array2 = [{ zip: "12051" }, { zip: "54021" }, { zip: "24521" }];

let resultArray = [];
$.each(array1, function(index, value) {
   resultArray.push($.extend(value, array2[index]));
});
console.log(resultArray);

edited Jan 30 '20 at 21:58

answered Jan 30 '20 at 21:40

Gangadhar Gandi

2,162
12
19

Would this work with 3 object arrays as well? – Zeusox Jan 30 '20 at 21:54
Yes, we have to change push statement like, resultArray.push({...array1[i], ...array2[i], ...array3[i]}); – Gangadhar Gandi Jan 30 '20 at 21:56

score 1 · Answer 3 · answered Jan 30 '20 at 21:41

You can use map:

const arr1 = [{"name": "2412"}, {"name": "3324"}, {"name": "8875"}];

const arr2 =  [{"zip": "12051"}, {"zip": "54021"}, {"zip": "24521"}];

let result = arr1.map((obj, idx) => {
      obj.zip = arr2[idx].zip; 
      return obj
  });

console.log(result)

Javascript: How Do you Combine Two Objects Into One

3 Answers3