up vote 4 down vote favorite
2

I'm relatively new to JavaScript and I thought I knew how callback functions worked but after a couple of hours of searching the web I still do not understand why my code is not working.

I am making an AJAX request which returns a string array. I'm trying to set this array to a local variable, but it seems to lose it's value as soon as the callback function is executed.

    var array;

    $.ajax({
        type: 'GET',
        url: 'include/load_array.php',
        dataType: 'json',
        success: function(data){
            array = data;
        },
        error: function(jqXHR, textStatus, errorThrown){
            alert("Error loading the data");
        }
    });

    console.debug(array);

In the console, array appears as undefined. Can anyone explain to me why this is not being set and how it is possible to set a local variable in a callback function.

share|improve this question

5 Answers

up vote 3 down vote accepted

The problem here is that console.log executes synchronously while the ajax call executes asynchronously. Hence it runs before the callback completes so it still sees array as undefined because success hasn't run yet. In order to make this work you need to delay the console.log call until after success completes. 

$(document).ready(function() {
    var array;

    var runLog = function() {
      console.log(array); 
    };

    $.ajax({
      type: 'GET',
      url: 'include/load_array.php',
      dataType: 'json',
      success: function(data){
        array = data;
        runlog();
    }});
});
share|improve this answer
I think you're confused by the formatting of the code. The console.debug is directly after the ajax. – James Montagne Feb 20 '12 at 21:28
I believe the scoping is correct, it's just the formatting is off for the first two non-blank lines (they should be shifted left 1). – GoldenNewby Feb 20 '12 at 21:28
@JamesMontagne you're exactly correct. The formatting really threw me off. Updated the answer. – JaredPar Feb 20 '12 at 21:29
up vote 2 down vote

The first A in ajax is for Asynchronous, which means that by the time you are debugging the array, the result still hasn't been delivered. Array is undefined at the point of displaying it's value. You need to do the console.debug below array = data.

share|improve this answer
Ah ha, it seems so obvious now! Is there an alternative to AJAX that you would recommend to guarantee that the program waits for the response before it continues execution? – Alex Feb 20 '12 at 21:29
You can do synchronous http calls in javascript, but there's no reason you should want to do it. Just start working with the result in the right scope next time. – GoldenNewby Feb 20 '12 at 21:31
1  
That's SJAX. Synchronous, i.e. the execution will be blocked until the result has been retrieved. In your request json, if you introduce async: false, then the retrieval will be synchronous - in simple words, your previous code will work. But then again, this is bad practice. Putting your debugging code inside a callback as pointed out by GoldenNewby is the way to go. – ink.robot Feb 20 '12 at 21:34
up vote 1 down vote

The success function doesn't execute immediately, but only after the HTTP-response arrives. Therefore, array is still undefined at this point. If you want to perform operations on the HTTP-response data, do it from within the success function, or alternatively, define that operation inside of a function and then invoke that function from within the success callback.

share|improve this answer
up vote 1 down vote

Try calling a function to set this variable after your success:

var array;

var goodToProceed = function(myArr) {
   console.debug(myArr);
};

$.ajax({
type: 'GET',
url: 'include/load_array.php',
dataType: 'json',
success: function(data){
    goodToProceed(data);
},
error: function(jqXHR, textStatus, errorThrown){
    alert("Error loading the data");
}
});
share|improve this answer
2  
Why bother making an anonymous function that calls goodToProceed instead of just having it get called directly upon success? – GoldenNewby Feb 20 '12 at 21:30
Yes GoldenNewby, good point. I do it often but indeed, no need to do it. – adis Feb 20 '12 at 21:49
@adis, sometimes is good to do it, to untangle the code, however, you don't need an anonymous function in that case. just define success: goodToProceed, – stivlo Jun 29 '12 at 10:51
up vote 0 down vote

AJAX is asynchronous. You are setting the array variable, but not until after that debug executes. Making an AJAX call sends a request but then continues on in the code. At some later point, the request returns and your success or error functions execute.

share|improve this answer

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.