4

How do you assign the data fetched via getJSON() to an array, for later use?

The getJSON url below retrieves properly formatted JSON with 10 main elements, each having subelements of id, username, haiku (and other). If you're running it, try saving the JSON elements to a local file, so you won't get the same domain error (i.e., JSON will not load if you're fetching from a different domain).

What happens is that the alert will fetch a value within the getJSON callback, but outside, the value is undefined. 


$(document).ready(function(){
    var haikus=[];
    alert("begin loop");
    $.getJSON('http://example.com/json.php',function(data){
         var i=0;
         for(i=0;i<data.length;i++){
            haikus[i]=[data[i].id,String(data[i].username),String(data[i].haiku)];
        }
            alert(haikus[0][1]);
    });
})
  • Yes, this is related to a previous post. But, I'd initially simplified my problem too much, so the initial solutions provided did not solve it. jQuery - getJSON data to array
Improve this question

2 Answers 2

Reset to default
20

Your issue is that any code outside (and after) the $.getJSON request has already run by the time the $.getJSON response is received.

Remember that AJAX calls are asynchronous. This means that the code following the AJAX request does not wait for the response to execute. So it runs long before there's any response.

The key is that any code that relies on the response from an asynchronous AJAX request, must run (or be called from) inside the callback.

EDIT:

To clarify, in the code example below, please see the code comments. It should help explain the issue.

$(document).ready(function(){
    var haikus=[];
    alert("begin loop");
    $.getJSON('http://haikuennui.com/random.php',function(data){
         var i=0;
         for(i=0;i<data.length;i++){
            haikus[i]=[data[i].id,String(data[i].username),String(data[i].haiku)];
        }
                 // The data in haikus is available here becuase
                 //    this alert() doesn't run until the response is received.
            alert(haikus[0][1]);
    });

         // Here the data in haikus is NOT available because this line
         //     of code will run ***before*** the response from the AJAX
         //     request from above is received.
         // In other words, this alert() executes **immediately** without
         //     waiting for the $.getJSON() to receive its response.
    alert(haikus[0][1]);

});
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

yes, but what if you populate a global array within the callback - can you reference the array later?
@ina - yes, of course. See this example: jsfiddle.net/FgV8W If you click the value while the JSON is loading you will get nothing, if you click it after it is done, it will give you your data.
@ina - It doesn't matter if it is global or not. If you are trying to use it before it has any data, then it will be undefined. If you are immediately trying to use the haikus variable outside the $.getJSON callback, it will not work. The code that is using haikus will not wait for the response to be returned. It will try to use haikus immediately. Because it does not wait for the response, then haikus will have not yet been assigned the data from the response.
@Ryley ahh i think i understand what's going on - so basically the json hasn't been loaded before the alert's called (?) Corollary questions - See Discussion on your jfiddle - jsfiddle.net/FgV8W
@ina - That is correct. If you have further questions, please leave comments here.
|
0

I believe if you define a variable by using 'var haikus = something', the variable is of local scope, and if you define the variable by using 'haikus = something', it is of global scope.

Improve this answer

4 Comments

I'm pretty sure simply doing haikus=something will give you a haikus not defined error, to do it in global scope, just define var haikus = something out side of any functions.
ahhh!! so my problem has to do with variable scoping (doh)
just tried declaring haikus=[] outside of the readyfunction - the alert both inside the readyfunction but outside the getjson still returns undefined... (rather, does not even pop up)
@Razor - haikus=something will give you a global variable. But a global is unnecessary since haikus is in the proper scope.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.