Question

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), it 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!

Answer 1

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.