Merge objects from two arrays in one

Question

I have one question about merge objects in array. The biggest problem is how to save this array structure after merger these arrays, because if I use .push() iterate after these array I receive one big array. Look on my data:

[ 
 [ 
   { name: '1' },
   { name: '2' },
   { name: '3' },
 ],
 [
   { name: '4' },
   { name: '5' },
   { name: '6' },
  ] 
]

and

[ 
 [ 
   { correct: false },
   { correct: true },
   { correct: false },
 ],
 [ 
   { correct: true },
   { correct: false },
   { correct: false },
 ] 
]

And my point is how merge these two array, to the one array in form like

[ 
 [ 
   { name: '1', correct: false },
   { name: '2', correct: true },
   { name: '3', correct: false },
 ],
 [ 
   { name: '4', correct: true },
   { name: '5', correct: false },
   { name: '6', correct: false },
 ] 
]

I tried following loop but I receive one big array, but I need two array

for(i in nameArray) {
   for(j in nameArray[i]){
       var mergeObj = Object.assign(nameArray,correctArray[j]) //I get undefned
       correctArray.push(nameArray[i][j])
   }
}

Answer 1

let arr1 = [[ { name: '1' }, { name: '2' }, { name: '3' }],[{ name: '4' }, { name: '5' }, { name: '6' }]]

let arr2 = [[{ correct: false },{ correct: true },{ correct: false }],[{ correct: true },{ correct: false },{ correct: false }]]

let arr3 = arr1.map((ele,ind)=>{
   return ele.map((e,i)=>Object.assign(e,arr2[ind][i]))
})

Answer 2

I believe that the best approach to your problem it is a recursive function. Something similar to this one:

var a = [ 
 [ 
   { name: '1' },
   { name: '2' },
   { name: '3' },
 ],
 [
   { name: '4' },
   { name: '5' },
   { name: '6' },
  ] 
]


var b = [ 
 [ 
   { correct: false },
   { correct: true },
   { correct: false },
 ],
 [ 
   { correct: true },
   { correct: false },
   { correct: false },
 ] 
]

var c = [
  [ 
    { hello: "world" }
  ]
];

function mergeRecursive(x,y){
  /**
   * Ignore functions
   */
  if( x instanceof Function ) {
    x = undefined;
  }
  if( y instanceof Function ) {
    y = undefined;
  }

  /**
   * Ignore undefineds
   */
   if( x == undefined ) {
     return y;
   }
   if( y == undefined ) {
     return x;
   }

   /**
    * Get the keys and remove duplicated
    */
   var kx = Object.keys(x).filter( (k) => ! ( x[k] instanceof Function ) );  
   var ky = Object.keys(y).filter( (k) => ! ( y[k] instanceof Function ) );
   var ks = kx.concat(
     ky.filter(
       (e) => kx.indexOf(e) == -1
     )
   );

   /**
    * Define the type of the result
    */
   var result;
   if (x instanceof Array && y instanceof Array ) {
     result = [];
     ks = ks.map( (k) => 1 * k ); // cast to number
   } else {
     result = {};
   }
   
   /**
    * Create the merge object recursively
    */
   ks.forEach( (k) => result[k] = mergeRecursive(x[k],y[k]) );
   return result;
}

var example1 = mergeRecursive(a,b);
console.log("example 1");
console.log(example1);

var example2 = mergeRecursive(example1,c);
console.log("example 2");
console.log(example2);

Answer 3

Here's another version that's blown out a little bit, and shows an example of how to handle a degree of nesting in the case of a more complex dataset.

const nameArray = [ 
 [ 
   { name: '1' },
   { name: '2' },
   { name: '3' },
 ],
 [
   { name: '4' },
   { name: '5' },
   { name: '6' },
  ] 
];

const correctArray = [ 
 [ 
   { correct: false },
   { correct: true },
   { correct: false },
 ],
 [ 
   { correct: true },
   { correct: false },
   { correct: false },
 ] 
];

var resultArray = []

function each(arr, fn){
    let len = arr.length, i = -1
    while(++i < len){ fn(arr[i], i) }
}

function addToArray(target, source){
    each(source, (elem, index) => {
        if(!target[index]){
            let newElem = elem.length ? [] : {}
            target[index] = newElem
        }
        if(elem.length){
            addToArray(target[index], elem)
        } else {
            let keys = Object.keys(elem)
            each(keys, key => {
                if(target[index][key]) console.warn(`Key ${key} already exists, overwriting`)
                target[index][key] = elem[key]
            })
        }
    })
}

addToArray(resultArray, nameArray)
addToArray(resultArray, correctArray)

console.log(JSON.stringify(resultArray, null, 2))

Answer 4

For a new independent array, you could use Array#reduce and build the new object in the matrix.

var array1 = [[{ name: '1' }, { name: '2' }, { name: '3' }], [{ name: '4' }, { name: '5' }, { name: '6' }]],
    array2 = [[{ correct: false }, { correct: true }, { correct: false }], [{ correct: true }, { correct: false }, { correct: false }]],
    result = [array1, array2].reduce((r, a) =>
        (a.forEach((b, i) =>
            (r[i] = r[i] || [], b.forEach((c, j) =>
                Object.assign(r[i][j] = r[i][j] || {}, c)))), r), []);

console.log(result);

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

Answer 5

You're close, but you have arrays of arrays of objects, so you need correctArray[i][j]

const nameArray = [ 
 [{ name: '1' },{ name: '2' },{ name: '3' }],
 [{ name: '4' },{ name: '5' },{ name: '6' }] 
];

const correctArray = [ 
 [{ correct: false },{ correct: true },{ correct: false }],
 [{ correct: true },{ correct: false },{ correct: false }] 
];

nameArray.forEach((a, i) =>
  a.forEach((o, j) => Object.assign(o, correctArray[i][j]))
);

console.log(nameArray);

Here I used .forEach(), which is nicer than using for-in on arrays. The objects in the nameArray are being mutated, so that's your result. You can instead use .map() calls and add an empty object at the start of Object.assign if you don't want to mutate.

const nameArray = [ 
 [{ name: '1' },{ name: '2' },{ name: '3' }],
 [{ name: '4' },{ name: '5' },{ name: '6' }] 
];

const correctArray = [ 
 [{ correct: false },{ correct: true },{ correct: false }],
 [{ correct: true },{ correct: false },{ correct: false }] 
];

const result = nameArray.map((a, i) =>
  a.map((o, j) => Object.assign({}, o, correctArray[i][j]))
);

console.log(result);