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?

Answer 3

You don't need to do like that, dealing with string is a boring job. You can make a object through the response. 1:json = eval(xmlHttp.responseText);

but this is unsafe in some degree.

1. json = JSON.parse(xmlHttp.responseText, function(key,value){// can do some other stuff here.});

then you can operate the variable as a normal object like this obj.a or obj["a"].

May this will help you.

Answer 4

http://jsfiddle.net/sG5sF/

jQuery.each works fine. So is for-each loop

http://jsfiddle.net/TfjrS/

Both of them work as they should. You might have errors in other parts of your code. Is the response variable set correctly to the JSON object given in your question? Are you checking the response statusCode? it should be 200 for a successful response?

Answer 5

Consider looking at How can I parse a JavaScript object with jQuery for a possible answer.

Answer 6

You can use for-in construct in pure Javascript. Of course, you need to be careful that you're only looking at the object's own properties (libraries like Prototype tend to pollute):

for(var key in response) {
    if(response.hasOwnProperty(key)) {
       ...
    }
}

EDIT

Are you using jQuery.ajax? What's the dataType value? It should be json. This might be why your response is being interpreted as a string. Also, when you console.log response, does it show up as a string or an object?