Iterate through Nested Array in JavaScript

Question

I'm trying to Iterate through a nested array and having trouble extracting the correct value.

My Json FIle

var regions = [
{
    "id": 265592,
    "longName": "Amsterdam 1",
    "name": "ams01",
    "statusId": 2,
    "regions": [
        {
            "description": "AMS01 - Amsterdam",
            "keyname": "AMSTERDAM",
            "sortOrder": 0
        }
    ]
},
{
    "id": 814994,
    "longName": "Amsterdam 3",
    "name": "ams03",
    "statusId": 2,
    "regions": [
        {
            "description": "AMS03 - Amsterdam",
            "keyname": "AMSTERDAM03",
            "sortOrder": 26
        }
    ]
},
{
    "id": 1004997,
    "longName": "Chennai 1",
    "name": "che01",
    "statusId": 2,
    "regions": [
        {
            "description": "CHE01 - Chennai ",
            "keyname": "CHENNAI",
            "sortOrder": 30
        }
    ]
},

I would like to extract only the Key name from the Regions Array into an Array.

MY code which works fine and gives me the output:

const regions3 = []
for (let i = 0; i < regions.length; i++) {
    const element = regions[i]; 
    const regions1 = (element.regions)
    for (let j = 0; j < regions1.length; j++) {
        const element1 = regions1[j];
        const element2 = element1.keyname;
        regions3.push(element2)
        console.log(regions3)
    }
}

Output

AMSTERDAM
AMSTERDAM03
CHENNAI

I would like to know if there a faster way to iterate rather than running it into two for loops??

Thank you

Answer 1

You can use Array.flatMap() (not supported in IE/Edge) with Array.map():

const regions = [{"id":265592,"longName":"Amsterdam 1","name":"ams01","statusId":2,"regions":[{"description":"AMS01 - Amsterdam","keyname":"AMSTERDAM","sortOrder":0}]},{"id":814994,"longName":"Amsterdam 3","name":"ams03","statusId":2,"regions":[{"description":"AMS03 - Amsterdam","keyname":"AMSTERDAM03","sortOrder":26}]},{"id":1004997,"longName":"Chennai 1","name":"che01","statusId":2,"regions":[{"description":"CHE01 - Chennai ","keyname":"CHENNAI","sortOrder":30}]}]

const result = regions.flatMap(o =>
  o.regions.map(p => p.keyname)
)

console.log(result)

If you can't use Array.flatMap() you can use an external Array.map() and spread the results into Array.concat() instead:

const regions = [{"id":265592,"longName":"Amsterdam 1","name":"ams01","statusId":2,"regions":[{"description":"AMS01 - Amsterdam","keyname":"AMSTERDAM","sortOrder":0}]},{"id":814994,"longName":"Amsterdam 3","name":"ams03","statusId":2,"regions":[{"description":"AMS03 - Amsterdam","keyname":"AMSTERDAM03","sortOrder":26}]},{"id":1004997,"longName":"Chennai 1","name":"che01","statusId":2,"regions":[{"description":"CHE01 - Chennai ","keyname":"CHENNAI","sortOrder":30}]}]

const result = [].concat(...regions.map(o =>
  o.regions.map(p => p.keyname)
))

console.log(result)