Question about JavaScript variable scope

Can someone tell me why this alert is empty?

var pending_dates = [];
$.getJSON('/ajax/event-json-output.php', function(data) {
    $.each(data, function(key, val) {
    pending_dates.push({'event_date' : val.event_date});
    });
});
alert(pending_dates);

I can't get my head around this. Am I not declaring pending_dates as a global variable, accessible within the each loop? How would one solve this?

Please note that the JSON output is working well. If I would declare pending dates within the getJSON function (and alert within that function), i开发者_Go百科t works, but I need to store the data in an array outside of that getJSON function.

Thanks for your contributions.

EDIT

Thanks to your comments this code is working:

    pending_dates = [];
    $.getJSON('/ajax/event-json-output.php', function(data) {
        $.each(data, function(key, val) {
            pending_dates.push({'event_date' : val.event_date});
        });
    }).success(function() { alert(pending_dates); })

Thanks a lot for your contributions!

I think the problem is $.getJSON is an asynchronous call - it returns immediately and then alert(pending_dates) is invoked.

However, when that happens, the response from the asynchronous call may not have been received, and hence pending_dates may not have been populated.

That is probably why it is empty at the time alert(pending_dates) is called.

Your alert is executing before the JSON call has finished. Remember this JSON it fetched and processed asynchronously, but your alert comes right after it's started. If you want an alert, then you need to put it at the completion of the getJSON call.

$.getJSON is working asynchronously meaning that whatever you have specified in the callback will be executed eventually but there is no guarantee that will happen by the time you reach alert('pending_dates').

You can verify this by moving alert('pending_dates') right after
pending_dates.push() (this would result in one alert being displayed for each item it is retrieving).

You can write a function to start working with the data you're retrieving as soon as it is available:

var pending_dates = [];
$.getJSON('/ajax/event-json-output.php', function(data) {
    $.each(data, function(key, val) {
        pending_dates.push({'event_date' : val.event_date});
        doSomething(val.event_date);
    });
});

function doSomething(date) {
    // do something with date
    // like writing it to the page
    // or displaying an alert
}

With this you'll be able to work with all the data you get as it becomes available.

Variables are global by default in Javascript - having var actually introduces scope. Remove that and see if it helps.

It's more likely that the AJAX response isn't returning any data. Can you try pushing just 'foo' onto the array, and see if the alert shows anything different?