How to loop through parsed JSON array using jquery .each()

Question

I have the following data which is being parsed and then I am looping through to attempt to get each state ID and name.

{
    "billing": {
        "ACT": "Australian Capital Territory",
        "NSW": "New South Wales",
        "NT": "Northern Territory",
        "QLD": "Queensland",
        "SA": "South Australia",
        "TAS": "Tasmania",
        "VIC": "Victoria",
        "WA": "Western Australia"
    },
    "shipping": {
        "ACT": "Australian Capital Territory",
        "NSW": "New South Wales",
        "NT": "Northern Territory",
        "QLD": "Queensland",
        "SA": "South Australia",
        "TAS": "Tasmania",
        "VIC": "Victoria",
        "WA": "Western Australia"
    }
}

 data = '{"billing":{"ACT":"Australian Capital Territory","NSW":"New South Wales","NT":"Northern Territory","QLD":"Queensland","SA":"South Australia","TAS":"Tasmania","VIC":"Victoria","WA":"Western Australia"},"shipping":{"ACT":"Australian Capital Territory","NSW":"New South Wales","NT":"Northern Territory","QLD":"Queensland","SA":"South Australia","TAS":"Tasmania","VIC":"Victoria","WA":"Western Australia"}}'; data = jQuery.parseJSON( data ); billingData = data.billing; $(billingData).each( function( key, value ) { console.log( key + value); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

I am expecting the console to loop through each state ID and the label, but I get they key as 0 and the value as an object, I have also tried looping through the outputted object (contained in value from the original .each ).

I have also tried looping through billingData[0] .

Answer 1

You need to use jQuery.each() instead of .each() to do this work.

The .each() loop through jquery elements but jQuery.each() loop through array or object.

 data = '{"billing":{"ACT":"Australian Capital Territory","NSW":"New South Wales","NT":"Northern Territory","QLD":"Queensland","SA":"South Australia","TAS":"Tasmania","VIC":"Victoria","WA":"Western Australia"},"shipping":{"ACT":"Australian Capital Territory","NSW":"New South Wales","NT":"Northern Territory","QLD":"Queensland","SA":"South Australia","TAS":"Tasmania","VIC":"Victoria","WA":"Western Australia"}}'; data = jQuery.parseJSON(data); billingData = data.billing; $.each(billingData, function(key, value) { console.log(key +": "+ value); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

billingData is not an array. It's an object. jQuery each will let you iterate through an object as though it were an array, or you could just use object methods:

 data = '{"billing":{"ACT":"Australian Capital Territory","NSW":"New South Wales","NT":"Northern Territory","QLD":"Queensland","SA":"South Australia","TAS":"Tasmania","VIC":"Victoria","WA":"Western Australia"},"shipping":{"ACT":"Australian Capital Territory","NSW":"New South Wales","NT":"Northern Territory","QLD":"Queensland","SA":"South Australia","TAS":"Tasmania","VIC":"Victoria","WA":"Western Australia"}}'; data = jQuery.parseJSON(data); billingData = data.billing; Object.keys(billingData).forEach(function(key) { console.log(key + ": " + billingData[key]) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 3

There are two types of each:

$.each(array, function( key, value ) {

});

$('.element').each(function () {

});