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

• Mark: Anish, as you can see from the comments on one of the answers below, it is not clear whether the inner regions array can contain more than one object. Maybe you could clarify in the question or your example data.
• guest271314: @MarkMeyer This question is clear. Ask your own question instead of attempting to superimpose your own data structure and requirement into this existing question.
• guest271314: @MarkMeyer The question as it stands is clear. You are intentionally ignoring the data structure, language used and expected output in the actual question.

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)

• anish anil: Fails with error const result = regions.flatMap(o => ^ TypeError: regions.flatMap is not a function
• Ori Drori: That's because it's not supported by IE/Edge (and other old versions of the other browsers). That's why I've added the 2nd solution.

Answer 2

You can use .map() and destructuring assignment

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}]}];
let res = regions.map(({regions: [{keyname}]}) => keyname);
console.log(res);

• Cody Gray: Comments are not for extended discussion; this conversation has been moved to chat.
• anish anil: @guest271314, Thank you, that works well. Would it be possible to just explain on how this is actually working. I tried the map function and understood the Syntax. let newArr = oldArr.map((val, index, arr) => { // return element to new Array }); I was also able to display the id and and Longname using the below code. let newArr = regions.map((val, i, arr) => { console.log(val.id); console.log(val.longName) }); But to be honest here, I'm unable to figure the logic where the region & Keyname is displayed. Could you just through in some light
• guest271314: @anishanil The target is the property within the array of objects named "regions" where the value is an array of objects where the "keyname" is the property value that is destructured, which is similar to regions[0]['regions'][0]['keyname'], see Destructuring assignment

Answer 3

Another solution for this is using Array::reduce():

var regions = [{"id":265592,"longName":"Amsterdam1","name":"ams01","statusId":2,"regions":[{"description":"AMS01-Amsterdam","keyname":"AMSTERDAM","sortOrder":0}]},{"id":814994,"longName":"Amsterdam3","name":"ams03","statusId":2,"regions":[{"description":"AMS03-Amsterdam","keyname":"AMSTERDAM03","sortOrder":26}]},{"id":1004997,"longName":"Chennai1","name":"che01","statusId":2,"regions":[{"description":"CHE01-Chennai","keyname":"CHENNAI","sortOrder":30}]}];
let res = regions.reduce(
 (acc, curr) => (curr.regions.forEach(x => acc.push(x.keyname)), acc),
 []
);
console.log(res);

Answer 4

Well its pretty much the same thing but using a forEach method or array type in javascript can save you some time. here is an example.

const regions3 = [];
 regions.forEach(function(region){
 region.regions.forEach(function(subRegion){
 regions3.push(subRegion.keyname);
 console.log(subRegion.keyname);
 })
 });

a forEach executes an anonymous function passing each element in array as the argument to the anonymous function