Populate array of JSON Objects with JSONP Ajax response

Question

I'm a noob to JS/JQuery. Here's the code:

ids = ["1", "2", "3"]
var imageData = [];
for (i=0; i<ids.length; i++) {
    $.ajax({
        url: 'http://my.images.edu/' + ids[i] + '/info.json',
        type: 'GET',
        dataType: 'jsonp',
        success: function(data) {
            imageData.push(data);
        }
    });
};
// now I want to do stuff with in a loop with the populated 
// array, but it's always empty!
console.log(imageData.length);

The JSONP is working (I can log the JSON Object response to the console in the success function). My guess based on this question is that the array isn't populated yet when I want to use it, but I may be wrong. If that's the case, how do I get around it, and otherwise, what am I missing? Thanks in advance!

Answer 1

imageData won't be edited until the current function context has completed its execution.

The code will run to completion and then the success callbacks will run one by one. You'll have to have your logic to handle the data placed inside the callbacks.

Since this looks like you actually want all the callbacks to complete before you do an operation, you probably want to look into jQuery deffereds

Something along these lines working in the loop.

$('#button').click(function() {
    $.when(
        $.ajax({
            url: '/echo/html/',
            success: function(data) {
                alert('request complete')
            }
        }),
        $.ajax({
            url: '/echo/html/',
            success: function(data) {
                alert('request complete')
            }
        })
    ).then( function(){
        alert('all complete');
    });
});