How to loop through an JSON associative array in javascript?

Question

I'm getting a JSON response from the server and i have to loop through the array in javascript and get the values. But I cant seem to loop throught it.

The JSON response of the array looks like this:

{
   "1": "Schools",
   "20": "Profiles",
   "31": "Statistics",
   "44": "Messages",
   "50": "Contacts"
}

I just want to loop through it to get the ID and Name and populate some values on the page.

I have tried:

$.each(response, function(key, value) {
    alert(key + ' ' + value);
});

// and 

for (var key in response) {
    alert(key + ' ' + response[key]);
}

But neither give the right values.

Thanks in advance for any help.

Reply: Hi, The response I'm getting with the second loop is:

0 {
1 "
2 1
3 "
4 :
5 "
6 S

etc etc

So that means its going through the whole response as a string and spliting it as key/value.

Thanks

Answer 1

Your problem is that you are not parsing the JSON string. Therefore, your foreach is going through the characters in the JSON string.

// If you are using jQuery.ajax, you can just set dataType to 'json' 
// and the following line will be done for you
var obj  = jQuery.parseJSON( response );
// Now the two will work
$.each(obj, function(key, value) {
    alert(key + ' ' + value);
});


for (var key in obj) {
    alert(key + ' ' + response[key]);
}

Answer 2

var response = {"1":"Schools","20":"Profiles","31":"Statistics","44":"Messages","50":"Contacts"};

for (var i in response) {
    console.log(i + ' ' + response[i]);
}

Works just fine, how are you getting your response var?