Mapping nested arrays using map in es6

Question

I am trying to loop through nested arrays using map.

const results = [
{
    id: 1,
    details: [
        {
            color: "red",
        }
    ]
},
{
    id: 2,
    details: [
        {
            color: "blue",
        }
    ]
}]

const list1 = results.map(car => { 
   return car.details;
})

const list2 = list.map(details => {
   return {
     detail: details.color
} 
});

console.log(list1);
console.log(list2);

List1 is displaying fine:

[ [ { color: 'red' } ], [ { color: 'blue' } ] ]

However with list2 I am getting the following:

[ { detail: undefined }, { detail: undefined } ]

Could anyone help me to map through the nested array?

What you expect this to be [ { detail: undefined }, { detail: undefined } ] ? — Ankit Agarwal
– Ankit Agarwal, Commented Apr 19, 2018 at 6:37
you are using list.map, it should be list1.map(..., for list2 — Satish Kumar
– Satish Kumar, Commented Apr 19, 2018 at 6:38

Nikhil Aggarwal · Accepted Answer · 2018-04-19 06:38:23Z

4

Try following

const results = [
{
    id: 1,
    details: [
        {
            color: "red",
        }
    ]
},
{
    id: 2,
    details: [
        {
            color: "blue",
        }
    ]
}]

const list1 = results.map(car => { 
   return car.details;
});

// assuming there was a typo here it should be list1
const list2 = list1.map(details => { 
   return {
     detail: details[0].color // details is an array
   } 
});

console.log(list1);
console.log(list2);

answered Apr 19, 2018 at 6:38

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

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

Comments

Nina Scholz · Accepted Answer · 2018-04-19 06:41:03Z

2

You need to map the inner array values and concat them to a single array.

var results = [{ id: 1, details: [{ color: "red" }] }, { id: 2, details: [{ color: "blue" }] }],
    list1 = results.map(({ details }) =>  details);
    list2 = list1.reduce(
        (r, details) => r.concat(details.map(({ color: detail }) => ({ detail }))),
        []
    );

console.log(list2);
console.log(list1);

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

answered Apr 19, 2018 at 6:41

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Comments

Ankit Agarwal · Accepted Answer · 2018-04-19 06:45:37Z

1

You are using incorrect variable name list that will be list1 and then inside the map you need to access the object of each details array for list1:

const results = [
{
    id: 1,
    details: [
        {
            color: "red",
        }
    ]
},
{
    id: 2,
    details: [
        {
            color: "blue",
        }
    ]
}]

const list1 = results.map(car => { 
   return car.details;
})

const list2 = list1.map(details => {
   return {
     detail: details[0].color
} 
});

console.log(list1);
console.log(list2);

edited Apr 19, 2018 at 6:45

answered Apr 19, 2018 at 6:39

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

Comments

Arman Charan · Accepted Answer · 2018-04-19 06:53:08Z

1

The problem is that the color properties of each of the details within list2 are nested within arrays.

To expose them: said arrays must be flattened.

Arrays of arrays can be flattened tersely using Array.prototype.concat() and Function.prototype.apply() like so:

const flattened = [].concat.apply([], [[1, 2], [3, 4]]) // [1, 2, 3, 4]

See below for a practical example.

// Input
const input = [{id: 1, details: [{color: "red"}]},{id: 2,details: [{color: "blue"}]}]

// Details.
const details = input.map(car => car.details)

// Colors.
const colors = [].concat.apply([], details).map(({color}) => ({detail: color}));

// Proof.
console.log('Details', details)
console.log('Colors', colors)

answered Apr 19, 2018 at 6:53

Arman Charan

5,8292 gold badges26 silver badges36 bronze badges

Comments

dealwap · Accepted Answer · 2018-04-19 06:42:53Z

0

You forgot the dynamic index of the array.    
const results = [
      {
          id: 1,
          details: [
              {
                    color: "red",
              }
          ]
      },
      {
          id: 2,
          details: [
          {
              color: "blue",
              }
          ]
      }]

      const list1 = results.map((car, i) => { 
        return car[i].details;
      })

      const list2 = list.map((details, i) => {
        return {
          detail: details[i].color
      } 
      });

      console.log(list1);
      console.log(list2);

answered Apr 19, 2018 at 6:42

dealwap

7313 gold badges17 silver badges38 bronze badges

Comments

31piy · Accepted Answer · 2018-04-19 06:45:50Z

0

The problems with your code are:

Typo in list. You wanted to use list1 instead.
In list1, details is an array. So you need to get the color on the basis of index.

const results = [{
    id: 1,
    details: [{
      color: "red",
    }]
  },
  {
    id: 2,
    details: [{
      color: "blue",
    }]
  }
]

const list1 = results.map(car => car.details);
const list2 = list1.map(details => ({ detail: details[0].color }));
console.log(list1);
console.log(list2);

edited Apr 19, 2018 at 6:45

answered Apr 19, 2018 at 6:40

31piy

23.9k6 gold badges51 silver badges69 bronze badges

Collectives™ on Stack Overflow

Mapping nested arrays using map in es6

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related