How to properly map an array to access properties in its nested arrays?

Question

Say I have an array of objects:

const array = [ 
   { 
      "fieldA":"abc",
      "fieldB":[ 
         { 
            "fieldC":{ 
               "fieldD":"I am here!"
            }
         },
         { 
            "fieldC":{ 
               "fieldD":"And I am here!",
            },
         }
      ]
   }
]

How can I access the fieldD property value of each object in the array?

What I've tried:

console.log(array.map(({ fieldB }) =>
    fieldB.map(({ fieldC: { fieldD } }) => ({ fieldD }))
))

However, this returns one parent array, which contains an array at it's 0 index, which contains objects with keys named fieldD .

I would like to return an array with just the values, ie:

// expected output
[ 'I am here!', 'And I am here!' ]

Is this possible with .map ?

Answer 1

You've almost got it. Instead of mapping fieldD to an object with => ({fieldD}) , you can map it to its value with => fieldD . For removing the inner arrays, you can use .flatMap() , which will map your inner array contents to one larger parent:

 const array = [ { "fieldA":"abc", "fieldB":[ { "fieldC":{ "fieldD":"I am here!" } }, { "fieldC":{ "fieldD":"And I am here!", }, } ] } ]; console.log(array.flatMap(({ fieldB }) => fieldB.map(({ fieldC: { fieldD } }) => fieldD) ))

A more browser-friendly version (as .flatMap() is relatively new to JS) would be to use a double .map() , and then .concat() to flatten your array:

 const array = [ { "fieldA":"abc", "fieldB":[ { "fieldC":{ "fieldD":"I am here!" } }, { "fieldC":{ "fieldD":"And I am here!", }, } ] } ]; console.log([].concat(...array.map(({ fieldB }) => fieldB.map(({ fieldC: { fieldD } }) => fieldD) )));

Answer 2

Try this.

 const array = [ { "fieldA":"abc", "fieldB":[ { "fieldC":{ "fieldD":"I am here!" } }, { "fieldC":{ "fieldD":"And I am here!", }, } ] } ]; let result = array.reduce((acc, item) => { let result = item.fieldB.map( elem => elem.fieldC.fieldD); return result; }, []); console.log(result);

Answer 3

 const array = [ { "fieldA":"abc", "fieldB":[ { "fieldC":{ "fieldD":"I am here!" } }, { "fieldC":{ "fieldD":"And I am here!", }, } ] } ] console.log(array.map(({ fieldB }) => fieldB.map(({ fieldC: { fieldD } }) => (fieldD)) )[0])

I hope this code helpful for you case. But It's not a proper solution.

Answer 4

You need to use recursion to achieve your goal:

 const array = [ { "fieldA":"abc", "fieldB":[ { "fieldC":{ "fieldD":"I am here!" } }, { "fieldC":{ "fieldD":"And I am here!", }, } ] } ]; const findField = function(obj, field){ for(let key in obj){ if(typeof obj[key] == 'object'){ return findField(obj[key], field); }else if(key == field){ return obj[key]; } } } array.forEach(obj => { console.log(findField(obj, 'fieldD')); });