Flatten array of objects of arrays JavaScript

Question

I am trying to flatten an array of objects of arrays. For example, we might have something like so:

[{ numbers: [1, 2, 3] }, { numbers: [4, 5] }, { numbers: [6] }]

I would like to flatten it into:

[1, 2, 3, 4, 5, 6]

I have a working solution doing something like this:

const arr = [{ numbers: [1, 2, 3] }, { numbers: [4, 5] }, { numbers: [6] }];
const almostFlattened = arr.map((obj) => obj.numbers);
const flattened = [].concat.apply([], almostFlattened);
console.log(flattened);

Does anyone know of an easier or more performant solution here, preferably without the almostFlattened middle step?

Ori Drori · Accepted Answer · 2019-03-27 15:46:44Z

13

You can try Array.reduce(), and flatten the numbers' arrays by concatenating the numbers with the accumulator:

const arr = [{ numbers: [1, 2, 3] }, { numbers: [4, 5] }, { numbers: [6] }];

const result = arr.reduce((r, obj) => r.concat(obj.numbers), []);

console.log(result);

Another option is Array.flatMap() (not supported by IE/Edge):

const arr = [{ numbers: [1, 2, 3] }, { numbers: [4, 5] }, { numbers: [6] }];

const result = arr.flatMap(obj => obj.numbers);

console.log(result);

edited Mar 27, 2019 at 15:46

answered Apr 16, 2018 at 21:18

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

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

1 Comment

zfrisch Over a year ago

you could also consolidate the push and return to => ( r.push(...obj.numbers), r )

CRice · Accepted Answer · 2018-04-16 21:19:14Z

5

Why not just use what you have, but inline? There's no need to declare a middle variable almostFlattened when you can put the .map call as part of the arguments to .concat:

const arr = [{ numbers: [1, 2, 3] }, { numbers: [4, 5] }, { numbers: [6] }]
const result = [].concat(...arr.map(o => o.numbers));
console.log(result)

answered Apr 16, 2018 at 21:19

CRice

32.6k5 gold badges63 silver badges75 bronze badges

1 Comment

Jack Ryan Over a year ago

Right, I just added the almostFlattened variable to explicitly highlight that middle step I am taking. My actual code is doing it inline.

CertainPerformance · Accepted Answer · 2018-04-16 21:22:57Z

1

Use the spread syntax with reduce:

const input = [{ numbers: [1, 2, 3] }, { numbers: [4, 5] }, { numbers: [6] }]
const output = input.reduce(((outputSoFar, { numbers }) => [...outputSoFar, ...numbers]), []);
console.log(output);

answered Apr 16, 2018 at 21:22

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Comments

williamsi · Accepted Answer · 2021-05-14 19:49:53Z

1

FlatMap is great

const data = [{ numbers: [1, 2, 3] }, { numbers: [4, 5] }, { numbers: [6] }]

data.flatMap(n => n.numbers)

If you want to flatten object with arrays:

Object.values({one: [1,2,3], two: [4,5,6]}).flat()

answered May 14, 2021 at 19:49

williamsi

1,6061 gold badge19 silver badges15 bronze badges

Comments

Jack Ryan · Accepted Answer · 2018-04-16 21:36:20Z

0

I also figured I would throw this out there in case anyone is using something like lodash/underscore (did not know this function existed at the time I posted the question):

const arr = [{ numbers: [1, 2, 3] }, { numbers: [4, 5] }, { numbers: [6] }];
const flattened = _.flatten(arr, 'numbers');
console.log(flattened);

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.js"></script>

answered Apr 16, 2018 at 21:36

Jack Ryan

1,32813 silver badges26 bronze badges

Comments

Steven · Accepted Answer · 2021-12-11 07:30:06Z

0

For much more deeply nested array of arrays such as: [1, 2, 3, [4, [5, [6, [7]]]]]

const flatten = (input, acc=[]) => {
    return input.reduce((_, current) => {
        if (Array.isArray(current)) return flatten(current, acc);  
        acc.push(current);
        return acc;
    }, []);
}

Usage:

console.log(flatten([1, 2, 3, [4, [5, [6, [7]]]]]));

answered Dec 11, 2021 at 7:30

Steven

1,2533 gold badges19 silver badges29 bronze badges

Collectives™ on Stack Overflow

Flatten array of objects of arrays JavaScript

6 Answers 6

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related