Javascript how to merge two child arrays as a single array

Question

I want to make an array flat.

// example of the start array
const myArray = [
  [ 
    { foo: "bar", baz: "qux"},
    { quux: "corge", grault: "garply" }
  ],
  [
    { waldo: "fred", plugh: "xyzzy" },
    { thud: "barbra", streisand: "woohoo" }
  ]
];

However I'd like it to be:

// end result
[
  { foo: "bar", baz: "qux"},
  { quux: "corge", grault: "garply" },
  { waldo: "fred", plugh: "xyzzy" },
  { thud: "barbra", streisand: "woohoo" }
]

Now the following example gives the result: (2) [Array(2), Array(2)].

const myArray = [
  [ 
   { foo: "bar", baz: "qux"},
    { quux: "corge", grault: "garply" }
  ],
  [
   { waldo: "fred", plugh: "xyzzy" },
    { thud: "barbra", streisand: "woohoo" }
  ]
];

let newArray = [];
myArray.forEach((subArray) => newArray.push(subArray));
console.log(newArray);

Does this answer your question? [Merge/flatten an array of arrays](https://stackoverflow.com/questions/10865025/merge-flatten-an-array-of-arrays) — Diogo Peres, Dec 04 '19 at 16:12

score 5 · Accepted Answer · answered Dec 04 '19 at 16:10

You can flatten the arrays using Array.flat():

const myArray = [
  [ 
    { foo: "bar", baz: "qux"},
    { quux: "corge", grault: "garply" }
  ],
  [
    { waldo: "fred", plugh: "xyzzy" },
    { thud: "barbra", streisand: "woohoo" }
  ]
];

const newArray = myArray.flat();

console.log(newArray);

score 1 · Answer 2 · answered Dec 04 '19 at 16:11

1

You can use spread operator to get what you want (but this is a quick fix, there are better ways to do it):

const myArray = [
  [ 
   { foo: "bar", baz: "qux"},
    { quux: "corge", grault: "garply" }
  ],
  [
   { waldo: "fred", plugh: "xyzzy" },
    { thud: "barbra", streisand: "woohoo" }
  ]
];

let newArray = [];
myArray.forEach((subArray) => newArray.push(subArray));
newArray = [...newArray[0], ...newArray[1]];
console.log(newArray);

answered Dec 04 '19 at 16:11

Darwin Gonzalez

175
1
9

1

Spread operator is not compatible with all browsers, so you should add this information to the answer. – Elias Soares Dec 04 '19 at 16:19

score 1 · Answer 3 · answered Dec 04 '19 at 16:16

You can use concat to merge arrays:

const myArray = [
  [ 
    { foo: "bar", baz: "qux"},
    { quux: "corge", grault: "garply" }
  ],
  [
    { waldo: "fred", plugh: "xyzzy" },
    { thud: "barbra", streisand: "woohoo" }
  ]
];

const merged = [].concat.apply([], myArray);
console.log(merged);

score 0 · Answer 4 · answered Dec 04 '19 at 16:14

You can use Array.concat():

const myArray = [
  [ 
    { foo: "bar", baz: "qux"},
    { quux: "corge", grault: "garply" }
  ],
  [
    { waldo: "fred", plugh: "xyzzy" },
    { thud: "barbra", streisand: "woohoo" }
  ]
];

let newArray = [];
myArray.forEach(
    (subArray) => {
        newArray = newArray.concat(subArray);
    }
);
console.log(newArray);

Javascript how to merge two child arrays as a single array

4 Answers4