Merging values from multiple objects inside array

Question

I have 3 separate arrays with 3 objects inside each of them:

[{Index: 1}, {Index: 2}, {Index: 3}]
[{Placement: 'Wall'}, {Placement: 'Roof'}, {Placement: 'Door'}]
[{Color: 'GREEN'}, {Color: 'WHITE'}, {Color: 'BLACK'}]

I'm trying to achieve the following:

[
{
Index: 1, 
Placement: 'Wall', 
Color: 'GREEN'
},

{
Index: 2,
Placement: 'Roof', 
Color: 'WHITE'
}, 

{
Index: 3,
Placement: 'Door',
Color: 'BLACK'
}
]

Is there a way to do this with JS? i've tried combining these with underscore and jquery's merge/extend, but i'm only getting either all of the values in one object or objects with single values(e.g. color). Help highly appreciated.

Answer 1

With ES6, you could use Array#map and Object.assign

var array1 = [{ Index: 1 }, { Index: 2 }, { Index: 3 }],
    array2 = [{ Placement: 'Wall' }, { Placement: 'Roof' }, { Placement: 'Door' }],
    array3 = [{ Color: 'GREEN' }, { Color: 'WHITE' }, { Color: 'BLACK' }],
    combined = array1.map((a, i) => Object.assign({}, a, array2[i], array3[i]));
console.log(combined);

.as-console-wrapper { max-height: 100% !important; top: 0; }

A only ES5 solution for multiple arrays.

var array1 = [{ Index: 1 }, { Index: 2 }, { Index: 3 }],
    array2 = [{ Placement: 'Wall' }, { Placement: 'Roof' }, { Placement: 'Door' }],
    array3 = [{ Color: 'GREEN' }, { Color: 'WHITE' }, { Color: 'BLACK' }],
    combined = [array1, array2, array3].reduce(function (r, a) {
        a.forEach(function (b, i) {
            Object.keys(b).forEach(function (k) {
                r[i] = r[i] || {};
                r[i][k] = b[k];
            });
        });
        return r;
    }, []);

console.log(combined);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

• Create a simple loop to iterate array
• Make an object and assign key to object considering each array
• Push object in array

var a = [{
  Index: 1
}, {
  Index: 2
}, {
  Index: 3
}];
var b = [{
  Placement: 'Wall'
}, {
  Placement: 'Roof'
}, {
  Placement: 'Door'
}];
var c = [{
  Color: 'GREEN'
}, {
  Color: 'WHITE'
}, {
  Color: 'BLACK'
}];
var arr = [];
for (var i = 0, len = a.length; i < len; i++) {
  var obj = {};
  obj.Index = a[i].Index;
  obj.Placement = b[i].Placement;
  obj.Color = c[i].Color;
  arr.push(obj);
}
console.log(arr);

Answer 3

More generic solution in classic and ES6 version:

// classic version
function mergeSameLengthArrays(arrays) {
  var length = arrays[0].length;
  var merged = [];
  
  //instead of this function you can use its equivalent from jquery or lodash library
  function mergeObjects(obj1, obj2){
    var mergedObj = {};
    for (var attr in obj1) {
      mergedObj[attr] = obj1[attr];
    }
    for (var attr in obj2) {
      mergedObj[attr] = obj2[attr];
    }
    
    return mergedObj;
  }
  
  for (var i = 0; i < length; i++) {
    arrays.forEach(function (arr) {
      merged[i] = mergeObjects(merged[i] || {}, arr[i]);
    });
  }
  
  return merged;
}

// ES6 version
function es6MergeSameLengthArrays(arrays) {
  return arrays.reduce((acc, arr) =>
    arr.map((item, i) =>
      Object.assign(acc[i] || {}, item)
    ), []);
}


// Usage examples
var a1 = [{a: 1}, {a: 2}];
var a2 = [{b: 1}, {b: 2}];

console.log('classic version:', mergeSameLengthArrays([a1, a2]));
console.log('ES6 version:', es6MergeSameLengthArrays([a1, a2]));