Merge arrays object by object

Question

I have an array of arrays, of the same size, of objects like this:

const array = [
  [{ name: 'John' }, { name: 'Julie' }, { name: 'Zack' }], 
  [{ color: 'blue' }, { color: 'orange' }, { color: 'green' }],
  [{ age: 12 }, { age: 10 }, { age: 35 }]
];

How do I merge these arrays object by object to have an output like this?

const result = [{ name: 'John', color: 'blue', age: 12 }, { name: 'Julie', color: 'orange', age: 10 } ...] 

If it could be using lodash, it would be nice too. Thanks in advance

Answer 1

You can use map and destructuring

const array1 = [{ name: 'John' }, { name: 'Julie' }, { name: 'Zack' }]; 
const array2 = [{ color: 'blue' }, { color: 'orange' }, { color: 'green' }];
const array3 = [{ age: 12 }, { age: 10 }, { age: 35 }];

let final = array1.map((a, i) => ({ ...a,
  ...array2[i],
  ...array3[i]
}))

console.log(final)

---

But would it work with several arrays?

const array = [
  [{ name: 'John' }, { name: 'Julie' }, { name: 'Zack' }], 
  [{ color: 'blue' }, { color: 'orange' }, { color: 'green' }],
  [{ age: 12 }, { age: 10 }, { age: 35 }],
  [{ someProp: 1 }, { someProp: 2 }, { someProp: 3 }]
];

let remaining = array.slice(1,)

let final = array[0].map((v,i)=>{
  let temp = {...v}
  remaining.forEach(v2=>{
    temp = {...temp, ...v2[i]}
  })
  return temp
})

console.log(final)

Answer 2

A caveman approach - pushing to an array from a for-loop.

const array1 = [{ name: 'John' }, { name: 'Julie' }, { name: 'Zack' }]; 
const array2 = [{ color: 'blue' }, { color: 'orange' }, { color: 'green' }];
const array3 = [{ age: 12 }, { age: 10 }, { age: 35 }];

let result = [];

for ( let i = 0; i < array1.length; i++ ){
  result.push( { ...array1[i], ...array2[i], ...array3[i] } );
}

console.log( result );