Map Array of Array?

Question

I have a crazy array look like this:

const data = [
     [{ Name: 'Name 1', Block: [{Id: "1"}, {Id: "2"}] }],
     [{ Name: 'Name 2', Block: [{Id: "3"}, {Id: "4"}] }],
]

I want to map Block to a single array to look like this:

[  { Id: '1' },
   { Id: '2' },
   { Id: '3' }, 
   { Id: '4' }
]

I have tried doing like this:

const data = [
     [{ Name: 'Name 1', Block: [{Id: "1"}, {Id: "2"}] }],
     [{ Name: 'Name 2', Block: [{Id: "3"}, {Id: "4"}] }],
]


const idList = data.map(blockData => {
   return blockData[0].Block;
});

console.log(idList)

What did I do wrong?

CertainPerformance · Accepted Answer · 2019-01-27 00:33:18Z

2

.map will create a new item for every index of the old array. If your input array has 2 items, the output array will also only have 2 items - but you want 4 items, so .map won't work. Use flatMap instead, to flatten:

const data = [
     [{ Name: 'Name 1', Block: [{Id: "1"}, {Id: "2"}] }],
     [{ Name: 'Name 2', Block: [{Id: "3"}, {Id: "4"}] }],
];

const idList = data.flatMap(([{ Block }]) => Block);

console.log(idList)

flatMap is only implemented on newer implementations, though - otherwise, use a polyfill or a different method, like reduceing into an array:

const data = [
     [{ Name: 'Name 1', Block: [{Id: "1"}, {Id: "2"}] }],
     [{ Name: 'Name 2', Block: [{Id: "3"}, {Id: "4"}] }],
];

const idList = data.reduce((a, [{ Block }]) => a.concat(Block), []);

console.log(idList)

edited Jan 27, 2019 at 0:33

answered Jan 27, 2019 at 0:28

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

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

Comments

Satyam Naolekar · Accepted Answer · 2019-01-27 00:53:27Z

0

your data is an array inside array so you should use map twice, Buth that will give you an array with 2 elements now you need to reduce or flatten the resulting array to get the desired output.

data.map(a=>{return a[0].Block.map(b=>{ return b})}).reduce((o, m) => [...m, ...o], [])

answered Jan 27, 2019 at 0:53

Satyam Naolekar

5607 silver badges10 bronze badges

Comments

Alexandros Panagiotakis · Accepted Answer · 2019-01-27 01:17:14Z

0

The most succinct way to do it would be with a reduce statement:

const reducer = (a, b) => a.concat(b[0].Block);
const idList = data.reduce(reducer, []);

This way it will be much clearer what you are trying to do.

answered Jan 27, 2019 at 1:17

Alexandros Panagiotakis

9386 silver badges13 bronze badges

Collectives™ on Stack Overflow

Map Array of Array?

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