Setting local variable in a JavaScript callback function

Question

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.

JaredPar · Accepted Answer · 2012-02-20 21:26:14Z

8

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();
    }});
});

answered Feb 20, 2012 at 21:26

JaredPar

759k152 gold badges1.3k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

James Montagne Over a year ago

I think you're confused by the formatting of the code. The console.debug is directly after the ajax.

GoldenNewby Over a year ago

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).

JaredPar Over a year ago

@JamesMontagne you're exactly correct. The formatting really threw me off. Updated the answer.

GoldenNewby · Accepted Answer · 2012-02-20 21:25:39Z

2

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.

answered Feb 20, 2012 at 21:25

GoldenNewby

4,4628 gold badges36 silver badges44 bronze badges

3 Comments

Alex Over a year ago

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?

GoldenNewby Over a year ago

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.

user504674 Over a year ago

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.

Šime Vidas · Accepted Answer · 2012-02-20 21:26:01Z

1

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.

answered Feb 20, 2012 at 21:26

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

Comments

adis · Accepted Answer · 2012-02-20 21:50:59Z

1

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");
}
});

edited Feb 20, 2012 at 21:50

answered Feb 20, 2012 at 21:28

adis

5,9517 gold badges53 silver badges71 bronze badges

3 Comments

GoldenNewby Over a year ago

Why bother making an anonymous function that calls goodToProceed instead of just having it get called directly upon success?

adis Over a year ago

Yes GoldenNewby, good point. I do it often but indeed, no need to do it.

stivlo Over a year ago

@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,

James Montagne · Accepted Answer · 2012-02-20 21:27:03Z

0

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.

answered Feb 20, 2012 at 21:27

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

Collectives™ on Stack Overflow

Setting local variable in a JavaScript callback function

5 Answers 5

3 Comments

3 Comments

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

3 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related