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

Ensure that each number is entered only once in the input field

Switching the hierarchy of list items in React

Need help addressing a sliding page issue in my Upwork clone script using JavaScript

Getting the value of an HTML tag returned from an Ajax request

JSON.parse has thrown an unexpected token error with 'e'

Display a webpage containing error messages and user input that can be sent back to the AJAX request

jquery unbinding events can lead to faster performance

Display or conceal several elements using JQUERY/HTML upon hovering

Having issues with Vue.js and the splice method not functioning properly on an array row

Transferring information from ReactJs via the fetch API to a nodeJs server

What is the best way to refresh or render a list in a React application?

Tips for making an AJAX request using jQuery

Contrasts between the storage of data in a static function versus a static object

Creating a hierarchical JSON structure using a database query in JavaScript

Problem with Bootstrap multiselect: it only opens the first time, and stops working after an ajax call

Using Vue.js, is it possible to apply a class to a clicked element and then remove it when another element is clicked?

Iterate through the list retrieved from the backend

Retrieving data from a JSON provider instance

Top technique for creating a unique cursor image for a website

How can I pick out paragraphs that don't end with a period and eliminate dashes using jQuery or JavaScript?