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?

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?

• javascript
• arrays
• object
• ecmascript-6

• 2 What you expect this to be [ { detail: undefined }, { detail: undefined } ]​​​​​ ? – Ankit Agarwal Commented Apr 19, 2018 at 6:37
• 1 you are using list.map, it should be list1.map(..., for list2 – Satish Kumar Commented Apr 19, 2018 at 6:38
• What is list ? – Hassan Imam Commented Apr 19, 2018 at 6:39
• use should use list1 instead of list . – Rohìt Jíndal Commented Apr 24, 2018 at 10:15

6 Answers 6

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);

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; }

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);

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)

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);

The problems with your code are:

1. Typo in list. You wanted to use list1 instead.
2. 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);