In Javascript, how do I map an array where elements could split into multiple elements?

Question

Say I have an object like this:

var families =
[
    { dad: 'bob', mom: 'sue', income: 10 },
    { dad: 'john', mom: 'jane', income: 5 }
];

Is there a fancy way to transform this into the following:

[ 'bob', 'sue', 'john', 'jane' ];

I know I could do it like this:

var people = [];
for (var index = 0; index < families.length; index++)
{
    people.push(families[index].dad);
    people.push(families[index].mom);
}

However I like to use Javascript's build-in array functions whenever possible (filter, map, forEach, etc). The best I could figure is using 'map':

var people = families.map(function(family)
{
    return [family.dad, family.mom];
});

But that doesn't do what I want:

[ [ 'bob', 'sue' ], [ 'john', 'jane' ] ]

Is there any built-in that can do what I want? Thanks!

Use a .flat() at the end?

ASDFGerte
– ASDFGerte

2020-04-30 00:37:25 +00:00
Commented Apr 30, 2020 at 0:37 — ASDFGerte
– ASDFGerte, Commented Apr 30, 2020 at 0:37

CertainPerformance · Accepted Answer · 2020-04-30 00:37:55Z

1

You can destructure the properties out in the .map, return an array like you're doing, then .flat()ten the array:

var families = [
    { dad: 'bob', mom: 'sue', income: 10 },
    { dad: 'john', mom: 'jane', income: 5 }
];

const names = families
  .map(({ dad, mom }) => [dad, mom])
  .flat();
console.log(names);

answered Apr 30, 2020 at 0:37

CertainPerformance

374k55 gold badges354 silver badges359 bronze badges

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

Comments

elvira.genkel · Accepted Answer · 2020-04-30 00:39:35Z

1

You can use reduce function:

let families =
[
    { dad: 'bob', mom: 'sue', income: 10 },
    { dad: 'john', mom: 'jane', income: 5 }
];

const result = families.reduce((res, item)=> {
return [...res, item.dad, item.mom]
}, [])

console.log(result)

Or just add flat() funtion to map result:

var people = families.map(function(family)
{
    return [family.dad, family.mom];
}).flat();

answered Apr 30, 2020 at 0:39

elvira.genkel

1,3331 gold badge6 silver badges12 bronze badges

Comments

Sergio-fm · Accepted Answer · 2020-04-30 11:25:24Z

0

One line code using .map
Creating nested array and then using .flat

var families =
[
    { dad: 'bob', mom: 'sue', income: 10 },
    { dad: 'john', mom: 'jane', income: 5 }
];

console.log (families.map(it => [it.dad, it.mom]).flat())

edited Apr 30, 2020 at 11:25

answered Apr 30, 2020 at 1:34

Sergio-fm

463 bronze badges

Collectives™ on Stack Overflow

In Javascript, how do I map an array where elements could split into multiple elements?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related