jquery variable scope within function

Question

meclass.prototype.switch = function() {
var items = [];
$.getJSON('http://localhost/jsoner.php', function(data) {
    $.each(data, function(key, val) { 
        items.push(val);
        alert(items[0]); //this works

    });
});
alert(items[0]); //this does not
}

I have been tinkering with this for awhile and not really getting it. I am having this problem in all of my jquery functions so it is something basic that I just haven't learnt- and haven't had luck finding answers on.

items array is empty when you are trying to access it. It's being populate only when you receive JSON object from the server. Therefore in your callback everything works just fine. — skovalyov
– skovalyov, Commented Oct 14, 2012 at 9:44

James Allardice · Accepted Answer · 2012-10-14 09:43:22Z

6

The getJSON method is asynchronous. Execution will continue with the following statement straight away. The callback function will be executed some time later, whenever the server has responded to the request.

For that reason, any code that relies upon the result of the async request will need to be moved inside the callback function.

This is effectively what happens:

var items = []; //Declare `items`, empty array
//Make AJAX request
alert(items[0]); //It's still an empty array
//Wait some arbitrary amount of time...

//AJAX request complete, run the callback function
alert(items[0]); //Inside callback, items now contains elements

answered Oct 14, 2012 at 9:43

James Allardice

166k22 gold badges335 silver badges315 bronze badges

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

Collectives™ on Stack Overflow

jquery variable scope within function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related