Accessing JSON data in a Javascript variable

Question

It's embarrassing to have to ask, but I freely admit I'm an unseasoned Javascript developer, and I just can't figure this out. Hopefully, this will be dead simple for someone else, and I want to thank everyone here ahead of time for the help this site continually provides me.

A couple days ago, I asked this question, and am no longer getting that error. But I've run into a wall trying to actually access the data stored in the variable. My JSON looks like this:

[
    {"id":"1","name":"Bob","haircolor":"Brown"},
    {"id":"2","name":"Carol","haircolor":"Red"}
]

It's going into a variable like this:

var people=[];
$.getJSON("php/getpeople.php", function(data){ //getpeople.php generates the JSON
    people.push(data);
});

Thanks to initializing people as an array, I no longer get any error messages. But I can't access the contents of people, either. people.length returns a 0, and people[0] and people[1] are undefined.

It's there, I know it's all there, but I'm having a devil of a time figuring out where.

Is your script returning `application/json` as the response MIME type? — tadman, Jan 29 '13 at 17:43
Using Firebug or a similar tool, can you verify that the browser is actually receiving the desired JSON? — dgvid, Jan 29 '13 at 17:44
You wouldn't happen to be using `people` right after the ajax call would you? — Musa, Jan 29 '13 at 17:44
Probably a duplicate: http://stackoverflow.com/questions/3302702/jquery-return-value-using-ajax-result-on-success , also relevant http://stackoverflow.com/questions/2942544/synchronous-calls-with-jquery — , Jan 29 '13 at 17:48
@tadman It doesn't matter, jQuery will attempt to convert it since the method is specifically `$.getJSON`. Something important to check is with `$.getJSON("", function () {}).error(function () { alert("error"); });` — Ian, Jan 29 '13 at 17:49
Also, if your Json is already a list of people objects why not just do `var people;` then `people=data` instead of nesting it in another list. — userBG, Jan 29 '13 at 17:54

Naftali · Answer 1 · 2013-01-29T18:10:26.690

2

people only gets values after the ajax event happens.

Call some callback function after you put the data into the people array.

edited Jan 29 '13 at 18:10

answered Jan 29 '13 at 17:51

Naftali

144,921
39
244
303

score 1 · Accepted Answer · answered Jan 29 '13 at 17:52

1

Try with this: http://jsfiddle.net/hUq7k/

$.getJSON("php/getpeople.php", function(data){ //getpeople.php generates the JSON
    $.each(data, function(i, people){
       console.log(people.id); //<------this should output "1, 2"
    });
});

make sure you are getting the response data.

answered Jan 29 '13 at 17:52

Jai

74,255
12
74
103

This was it! And it's so simple, too. I'm embarrassed at having to ask it in the first place. Thank you so much! – Damon Kaswell Jan 29 '13 at 18:52
It worked very well, and gave me some ideas on easier debugging, too. I only recently learned about console.log(), and it has a lot of really wonderful uses. – Damon Kaswell Jan 29 '13 at 20:46

score 0 · Answer 3 · answered Jan 29 '13 at 17:51

The following should work, if the server is actually returning the expected JSON:

$.getJSON("php/getpeople.php", function(data){ //getpeople.php generates the JSON
    var people = data;
    alert("people.length: " + people.length);
    if (people.length > 0) {
        alert("people[0].id: " + people[0].id);
    }
});

The following should not work, i.e., people will be undefined, because $.getJSON is an asynchronous method and this code is attempting to access people before the AJAX operation has completed.

var people;
$.getJSON("php/getpeople.php", function(data){ //getpeople.php generates the JSON
    people = data;
});

alert("people.length: " + people.length);
if (people.length > 0) {
    alert("people[0].id: " + people[0].id);
}

Accessing JSON data in a Javascript variable

3 Answers3

Linked