Merge multiple arrays of objects into one array of objects JavaScript

Question

So suppose I have a few different Arrays as follows:

var first = [{key1: x},{key1:y},{key1:z},{key1:a},{key1:b},{key1:v}, ...];
var second = [{key2: anything},{key2:...},{key2:...},{key2:...},{key2:...},{key2:...}, ...];
var third = [{key3: value},{key3:...},{key3:...},{key3:...},{key3:...},{key3:...}, ...];
var fourth = [{key4:another value},{key4:...},{key4:...},{key4:...},{key4:...},{key4:...}];
var fifth = [{key5: and another one},{key5:...},{key5:...},{key5:...},{key5:...},{key5:...}];
.
.
.
and so on...

now I would like to merge them into one array where my new objects contain one of each of the other arrays like so:

var newBigArray = [{key1: x, key2: anything, key3: value, key4: another value, key5: and another one (here in this object the first of each of the original array's objects merged into one},{here in the second object the second of each of the original array's objects...},{here the third...},{fourth},{fifth},{...},...];

I hope you get the idea.

I have tried the .push() method, the Object.assign(), and some variations of for-loops but I can't find the solution.

How would one go about this, any ideas?

[first, second, third, fourth, fifth].map(array => arrray[0]); — Andy Ray, Jun 01 '21 at 19:54
What happens when one array is shorter than the others? Or longer? — Heretic Monkey, Jun 01 '21 at 20:02
Just do a normal indexed for loop and use [How to concatenate properties from multiple JavaScript objects](https://stackoverflow.com/q/2454295/215552) to combine one element from each array at each index. — Heretic Monkey, Jun 01 '21 at 20:07
Does this answer your question? [Merge multiple objects inside the same array into one object](https://stackoverflow.com/questions/27538349/merge-multiple-objects-inside-the-same-array-into-one-object) — Heretic Monkey, Jun 01 '21 at 20:10
@HereticMonkey Well not quite, the keys are the same in the original Arrays and as far as I unterstood, that is why the values get overriden when I try the conventional methods... — originalmozartkugel, Jun 01 '21 at 20:35
None of the keys are the same in the question I linked to in my last comment. — Heretic Monkey, Jun 01 '21 at 21:40

Nina Scholz · Answer 1 · 2021-06-01T20:10:05.937

3

You could collect all objects in an array and assign all properties of the same index to a single object.

const
    first = [{ key1: 'a' }, { key1: 'b' }, { key1: 'c' }, { key1: 'd' }, { key1: 'e' }, { key1: 'f' }],
    second = [{ key2: 1 } , { key2: 2 }, { key2: 3 }, { key2: 4 }, { key2: 5 }, { key2: 6 }],
    third = [{ key3: 'z' }, { key3: 'y' }, { key3: 'x' }, { key3: 'w' }, { key3: 'v' }, { key3: 'u' }],
    result = [first, second, third]
        .reduce((r, a) => a.map((o, i) => Object.assign(r[i] || {}, o)), []);

console.log(result);

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

edited Jun 01 '21 at 20:10

answered Jun 01 '21 at 20:02

Nina Scholz

376,160
25
347
392

Can you make this executable so you can show that it produces the desired result? – Barmar Jun 01 '21 at 20:07
@NinaScholz, hey, so it does work quite well, but the last object only contains the last key, could you think of any reason why this is? I used your line and just substituted [first, second, third] with my arraynames – originalmozartkugel Jun 02 '21 at 10:33
maybe the lengths are not equal. – Nina Scholz Jun 02 '21 at 10:36

score -2 · Answer 2 · answered Jun 01 '21 at 20:02

-2

You can use the spread operator:

let first = [{x: 1, y:2}]
let second = [{x: 2, y:2}]
let third = [{x: 3, y:2}]
let fourth = [{x: 4, y:2}]
let fifth = [{x: 5, y:2}]

let finalArray = [
  ...first,
  ...second,
  ...third,
  ...fourth,
  ...fifth
]

console.log(finalArray)

answered Jun 01 '21 at 20:02

Vincent Sastra

1

That doesn't look like the desired result. – Barmar Jun 01 '21 at 20:05
no the point is, that in one array, all the keys are the same and I need to spread them evenly within new objects in a new single array – originalmozartkugel Jun 01 '21 at 20:42

Merge multiple arrays of objects into one array of objects JavaScript

2 Answers2