Merge n objects from n arrays of objects

Question

I have two arrays of objects and I want to create a new array of objects where every object is a merged version from previous two objects, for example:

const one = [
  { id: 1, title: 'One' },
  { id: 2, title: 'Two' }
]

const two = [
  { status: 'Open' },
  { status: 'Close' }
]

From above arrays I'll expect:

const result = [
  { id: 1, title: 'One', status: 'Open' },
  { id: 1, title: 'Two', status: 'Close' }
]

The question here is I don't know how to create a function that actually can receive n arrays of objects and creates the new one, for example if I wanna to merge a third array:

const three = [
  { items: 10 },
  { items: 2 }
]

I'll expected the following array:

const result = [
  { id: 1, title: 'One', status: 'Open', items: 10 },
  { id: 1, title: 'Two', status: 'Close', items: 2 }
]

I think that actually I can create a function that receive a spread but I don't know how to merged every object from every array recived into the function.

Nitish Narang · Accepted Answer · 2018-11-10 08:30:59Z

2

You can use "Array.reduce" or "Array.map" to achieve this like below

const one = [
  { id: 1, title: 'One' },
  { id: 2, title: 'Two' }
]

const two = [
  { status: 'Open' },
  { status: 'Close' }
]

const three = [
  { items: 10 },
  { items: 2 }
]

// using REDUCE
function mergeArrays1(arrays) {
  return arrays[0].reduce((a, d, i) => a.concat(Object.assign(...arrays.map(d => d[i]))), [])
}

// Using Map
function mergeArrays2(arrays) {
  return arrays[0].map((d, i) => Object.assign(...arrays.map(d => d[i])))
}

console.log(mergeArrays1([one, two, three]))
console.log(mergeArrays2([one, two, three]))

edited Nov 10, 2018 at 8:30

answered Nov 10, 2018 at 8:23

Nitish Narang

4,2042 gold badges18 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rodrigo Moreno Over a year ago

It seems that reduce solution is slightly faster

Nitish Narang Over a year ago

Great! You can then go ahead with Reduce solution. Though, I think difference would be hardly noticeable.

CertainPerformance · Accepted Answer · 2018-11-10 08:17:31Z

1

Pass in every array as an argument, then use .map on one of them to Object.assign every item in the new array:

const merge = (...arrs) => arrs[0].map((_, i) => (
  //                   Extract the [i]th item from every array:
  Object.assign({}, ...arrs.map(arr => arr[i]))
));

const one = [
  { id: 1, title: 'One' },
  { id: 2, title: 'Two' }
];
const two = [
  { status: 'Open' },
  { status: 'Close' }
];
const three = [
  { items: 10 },
  { items: 2 }
];

console.log(merge(one, two));
console.log(merge(one, two, three));

Of course, this depends on every array having the same number of elements.

answered Nov 10, 2018 at 8:17

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

1 Comment

Nitish Narang Over a year ago

Hi, I have added an answer for both Reduce and Map, and later realised your Map solution already exists(which is same as mine).. and I didn't see that earlier. So pls dnt mind..

SiddAjmera · Accepted Answer · 2018-11-10 09:39:23Z

0

You could use map if you know the number of arrays you'll have to merge.

Alternatively, you can also use Lodash's merge for this. That way you can pass any number of arrays as an argument.

Try this:

const one = [
  { id: 1, title: 'One' },
  { id: 2, title: 'Two' }
];

const two = [
  { status: 'Open' },
  { status: 'Close' }
];

const three = [
  { items: 10 },
  { items: 2 }
];

// Normal Merge
function merge(one, two, three) {
  return one.map(
    (item, index) => ({
      ...item,
      ...two[index],
      ...three[index]
    })
  );
}

// Lodash Merge
function mergeWithLodash(...arrays) {
  return _.merge(...arrays);
}

console.log(merge(one, two, three));

console.log('merged with lodash: ', mergeWithLodash(one, two, three));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

edited Nov 10, 2018 at 9:39

answered Nov 10, 2018 at 8:17

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

1 Comment

CertainPerformance Over a year ago

This does not take into account the possibility of an unknown amount of arrays that need to be merged.

Collectives™ on Stack Overflow

Merge n objects from n arrays of objects

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related