CODEWITHSUNDEEP
javascript
mordecai
mordecai

Reputation: 569

Merge arrays object by object

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

Upvotes: 5

Views: 136

Answers (5)

Code Maniac
Code Maniac

Reputation: 37775

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)

Upvotes: 7

Mischa
Mischa

Reputation: 1701

For a variable amount of arrays aka 2 dimensional array:

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

const mergeFirst = (arrays) => {
    return [...arrays.map(arr => arr[0])].reduce((obj, val) => ({
        ...obj,
        ...val,
    }), {});
}

const mergeAttributes = (arrays, results = []) => {
    return (arrays[0].length) ? mergeAttributes(arrays.map(arr => arr.slice(1, arr.length)), results.concat(mergeFirst(arrays))) : results;
}

console.log( mergeAttributes([array1,array2,array3,array4]) );

Upvotes: 0

Joe Iddon
Joe Iddon

Reputation: 20434

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 );

Upvotes: 2

Gibor
Gibor

Reputation: 1721

you don't need lodash, its easy enough with vanilla JS using array.map.

I'm assuming you have same number of object in all 3 arrays, if you need to also handle the case that there aren't- let me know.

array1.map( (el, index) => 
    ({ ...el, ...array2[index], ...array3[index] }) 
);

Upvotes: 0

Xizam
Xizam

Reputation: 728

const result = array1.map((el, index) => ({
...el,
...array2[index],
...array3[index]
}))

Upvotes: 0

Related Questions