How merge array objects in javascript

Question

I want to know if this is possbile

arr1 = [{
  text: "John",
  Description: "tall"
}, {
  text: "Dave",
  Description: "short"
}, {
  text: "Christian",
  Description: "medium"
}, {
  text: "Mark",
  Description: "thin"
}]

arr2 = [{
  text2: "Orange",
  Description2: "sweet"
}, {
  text2: "Prunes",
  Description2: "Bitter"
}, {
  text2: "Apple",
  Description2: "sweet"
}]

I want to merge the two arrays to look like this

arr3 = [{
  text: "John",
  Description: "tall",
  text2: "Orange",
  Description2: "sweet"
}, {
  text: "Dave",
  Description: "short",
  text2: "Prunes",
  Description2: "Bitter"
}, {
  text: "Christian",
  Description: "medium",
  text2: "Apple",
  Description2: "sweet"
}, {
  text: "Mark",
  Description: "thin"
}]

I have tried to use concat() but it only puts the merge object at the end of the first array it does not seem to give the output that I want.

**Yes** It's possible. Iterate over array, get element at the index from both arrays, combine them in single object, add it to the same index in new array. Hint: `Object.assign`. — Tushar, Nov 28 '16 at 03:25
you don't *just* want to merge the array, you want to merge the objects that are at each array index. — Claies, Nov 28 '16 at 03:25
What do you want to do if the second array has more elements than the first? — nnnnnn, Nov 28 '16 at 03:38
@nnnnnn it will just be untouched but still be merged in the array object — user3797088, Nov 28 '16 at 03:40

nnnnnn · Answer 1 · 2016-11-28T06:06:46.313

Here's a simple way to do it using a basic loop:

var arr3 = [];

for (var i = 0; i < arr1.length || i < arr2.length; i++)
  arr3.push( Object.assign({}, arr1[i], arr2[i]) );

The Object.assign() method copies "the values of all enumerable own properties from one or more source objects to a target object", and returns the new object.

In the code I've shown, the first argument to Object.assign() is a new empty object, the second argument is the element in arr1 at index i, and the third argument is the corresponding element in arr2. Noting that Object.assign() ignores arguments that are undefined, this will work even if arr1 and arr2 are different lengths (if i is greater than or equal to arr1.length then arr1[i] will be undefined, and same for arr2).

(Expand and run this snippet to see it working:)

var arr1 = [{
  text: "John",
  Description: "tall"
}, {
  text: "Dave",
  Description: "short"
}, {
  text: "Christian",
  Description: "medium"
}, {
  text: "Mark",
  Description: "thin"
}];

var arr2 = [{
  text2: "Orange",
  Description2: "sweet"
}, {
  text2: "Prunes",
  Description2: "Bitter"
}, {
  text2: "Apple",
  Description2: "sweet"
}];

var arr3 = [];

for (var i = 0; i < arr1.length || i < arr2.length; i++)
  arr3.push(Object.assign({}, arr1[i], arr2[i]));
console.log(arr3);

score 1 · Answer 2 · 2016-11-28T06:07:34.950

We'll start off by writing a little utility routine which loops across two arrays, and returns an array of the results of calling some function on each pair of elements, sort of like Array#map but working on two input arrays:

function map2(a1, a2, fn) {
  const len = Math.max(a1.length, a2.length);
  const result = [];

  for (let i = 0; i < len; i++) {
    result.push(fn(a1[i], a2[i]);
  }

  return result;
}

With this under our belt, the solution is just

map2(arr1, arr2, (a1, a2) => Object.assign({}, a1, a2))

Note that Object.assign will ignore undefined, which is the behavior we want here, since this will happen if one array is longer than the other.

Extra credit

We can extend our utility to routine to work on any number of input arrays, specified as an array of arrays, with the provided function taking an array of values:

function multiMap(arrays, fn) {
  const len = Math.max(...arrays.map(a => a.length));
  const result = [];

  for (let i = 0; i < len; i++) {
    result.push(fn(arrays.map(a => a[i])));
  }

  return result;
}

Then

multiMap([arr1, arr2], args => Object.assign({}, ...args)

How merge array objects in javascript

2 Answers2

Extra credit