Understanding intricate JSON structures with JavaScript

Question

Understanding intricate JSON structures with JavaScript

Here is the JSON structure that I am working with:

var data = [
   {
      "country":"Andorra",
      "code":"AD",
      "state":[
         {
            "state_code":"AD1",
            "state_description":"aaAndorra1"
         },
         {
            "state_code":"AD2",
            "state_description":"aaAndorra2"
         }
      ]
   }
]

My goal is to iterate over the 'state' property and retrieve the value of the 'state_code'

This is my current approach :

for (var key in data) {
        if (data.hasOwnProperty(key)) {
            if(data[key].state.state_code === "AD1"){
                console.log(data[key].state.state_description);
        }
    }

However, I'm getting an undefined result.

Any suggestions or assistance would be greatly appreciated.

Thank you!

javascript json

Answer 1

Answer №1

Give this code a try

for (let x = 0; x < infoList.length; x++) {
    for (let y = 0; y < infoList[x].stateInfo.length; y++) {
        if(infoList[x].stateInfo[y].abbrev === "AD1"){
            console.log(infoList[x].stateInfo[y].description)
        }
    };
};

Answer 2

Give this code a try

for (let x = 0; x < infoList.length; x++) {
    for (let y = 0; y < infoList[x].stateInfo.length; y++) {
        if(infoList[x].stateInfo[y].abbrev === "AD1"){
            console.log(infoList[x].stateInfo[y].description)
        }
    };
};

Answer 3

Answer №2

Attempt to iterate starting from the outer object and display it,

data.forEach(function(country){ //Loop through countries
  country.state.forEach(state){ //Loop through states
    console.log(state.state_code,state.state_description);
  });
});

Just a reminder, avoid using for-in loop when iterating over an array. It will go through all the enumerable properties of an object including the prototypes. I noticed you used .hasOwnProperty(), which is good for preventing such issues, but in this case, using for-in loop is unnecessary.

DEMO

Answer 4

Attempt to iterate starting from the outer object and display it,

data.forEach(function(country){ //Loop through countries
  country.state.forEach(state){ //Loop through states
    console.log(state.state_code,state.state_description);
  });
});

Just a reminder, avoid using for-in loop when iterating over an array. It will go through all the enumerable properties of an object including the prototypes. I noticed you used .hasOwnProperty(), which is good for preventing such issues, but in this case, using for-in loop is unnecessary.

DEMO

Answer 5

Answer №3

If you are looking to extract an array containing all state codes:

var result = data.reduce(function(array, item) {
    // Loop through each state in the item
    item.state.forEach(function(state){
      // Add the state_code to our resulting array
      // You can add conditions here such as 
      // if(state.state_code === "AD1") array.push(state.state_code)
      array.push(state.state_code)
    });
    return array;
}, [])

Check out this JSFiddle example

Answer 6

If you are looking to extract an array containing all state codes:

var result = data.reduce(function(array, item) {
    // Loop through each state in the item
    item.state.forEach(function(state){
      // Add the state_code to our resulting array
      // You can add conditions here such as 
      // if(state.state_code === "AD1") array.push(state.state_code)
      array.push(state.state_code)
    });
    return array;
}, [])

Check out this JSFiddle example

Answer 7

Answer №4

let peopleData = data.filter(person => person.age > 18);
peopleData.forEach(individual => {
  console.log(individual.name);
});

Answer 8

let peopleData = data.filter(person => person.age > 18);
peopleData.forEach(individual => {
  console.log(individual.name);
});

Answer 9

Answer №5

The data variable you have declared is an array of objects, each object containing an array of states. To iterate deep into this structure, your loop should be structured as shown below (successfully tested):

    for (var i = 0; i <= data.length; i++) {
        for(var j = 0; j <= data[i].state.length; j++){
            alert("Here is the state code: " + data[i].state[j].state_code);
        }
    }

Answer 10

The data variable you have declared is an array of objects, each object containing an array of states. To iterate deep into this structure, your loop should be structured as shown below (successfully tested):

    for (var i = 0; i <= data.length; i++) {
        for(var j = 0; j <= data[i].state.length; j++){
            alert("Here is the state code: " + data[i].state[j].state_code);
        }
    }

Answer 11

Answer №6

The for...in loop is used to cycle through the enumerable properties of an object

If you need to iterate over Arrays, consider using a traditional for loop or the Array#forEach method

for (var i = 0; i < data.length; i++) {
    for (var j = 0; j < data[i].state.length; j++) {
        if (data[i].state[j].state_code === "AD1") {
            console.log(data[i].state[j].state_description);
        }
    }
}

Answer 12

The for...in loop is used to cycle through the enumerable properties of an object

If you need to iterate over Arrays, consider using a traditional for loop or the Array#forEach method

for (var i = 0; i < data.length; i++) {
    for (var j = 0; j < data[i].state.length; j++) {
        if (data[i].state[j].state_code === "AD1") {
            console.log(data[i].state[j].state_description);
        }
    }
}

Understanding intricate JSON structures with JavaScript

Answer №1

Answer №2

DEMO

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Troubleshooting: How to resolve the issue of "Error [ERR_HTTP_HEADERS_SENT]: Unable to set headers after they have been sent to the client"

Local working fine but encountering issues on Openshift, specifically with syncing npm package versions across environments (local and global)

Even with manual installation, the npm package still encounters dependency errors

Switching between multiple images using Jquery on a click event

Retrieve information filtered based on the query parameter

Incorporate communication between the front-end and backend

Creating unique appbars for different sections on my sidebar in ReactJs

What is the reason for the value of an object's key becoming undefined when it is set within a loop?

What is the best way to assign a distinct index value to each object in an array

Trouble arises when displaying data using AngularJS in an HTML environment

What could be causing this JavaScript if statement to malfunction?

Learn how to dynamically modify the text and color of a column value within a <v-data-table> component in Vue.js 2.6.11 and Vuetify 2.2.11 based on a specific condition

Error occurred when trying to import an external module using an invalid hook call

Is there a way to prevent the back button from functioning in my web browser?

Achieving data synchronization and sequencing with AngularJS promises at a 1:1 ratio

Changing the Displayed Content with a Simple Click of a Link

What could be the reason for the undefined value of my ID retrieved from the next JS router.query upon page refresh?

The convergence of Phoenix, Json, and Unix Timestamps

Preventing file overwriting using fs.writefile method

What are some tips for efficiently troubleshooting a JQuery GET request to MailChimp 3.0 servers?