Adding additional property to $.ajax() callback with promise

Question

I need to make 2 calls to an API which each contain some of the total data, that then needs to be iterated over. Call 1 gets two jsonp objects:

[{
    "id": 17,
    "name": "A",
    "campaign_code": "CAP20481"
},{
    "id": 18,
    "name": "B",
    "campaign_code": "CAP20481"
}]

Call 2 uses the ID from the first call to get an integer. I then need the corresponding "name" and integer. So far I have:

function getStoreCounts() {
    var campaignID = $("input[title='Campaign ID']").val();
    var storeLists = $.ajax({
        type: "GET",
        dataType: "jsonp",
        url: "/apiIndex?callback=?&campaign_code=" + campaignID.toString(),
    }),
    storeCount = storeLists.then(function(data) {       
        $.each(data,function(i,storeList){
            $.extend(storeList,{stores:''});
            var getCount = $.ajax({
                type: "GET",
                dataType: "jsonp",
                url: "/apiStoreCount?callback=?&list_id=" + storeList.id.toString(),
            });

            getCount.done(function(count) {
                storeList.stores = count;
            });

        });
        return data;
    });

    storeCount.done(function(data) {
        console.log(data);
        $.each(data,function(i,tierCount){
            console.log("Tier: "+tierCount.name);
            console.log("Stores: "+tierCount.stores);
        });
    });
}

At the final done promise return when I log out the whole data array, I get the stores values for each object intact. But when I try to iterate over each object in the array I'm missing the stores value. Attached output from Chrome.

Your issue is because you're not waiting for the second loop of AJAX requests to complete before returning `data`. You need to return those promises as an array and wait them all. Also note that this would be a lot simpler (and less demanding on your server) if you returned all this information in a single request. — Rory McCrossan, Jul 14 '16 at 07:10

Yury Tarabanko · Accepted Answer · 2016-07-14T07:23:04.903

You need to wait for all inner promises to resolve. $.when

storeCount = storeLists.then(function(data) {
    // array of promises       
    var counting = $.map(data,function(storeList){
        $.extend(storeList,{stores:''});
        var getCount = $.ajax({
            type: "GET",
            dataType: "jsonp",
            url: "/apiStoreCount?callback=?&list_id=" + storeList.id.toString(),
        });

        return getCount.then(function(count) {
            storeList.stores = count;
        });

    });
    // wait for all 
    return $.when.apply($, counting).then(function() {
       return data; //return modified data
    })
});

And a side note on naming convetion. Your function was named getStoreCounts but returns undefined. Let it return the final promise.

function gettingStoreCounts() {
    var campaignID = $("input[title='Campaign ID']").val();
    var storeLists = $.ajax({...}),
    return storeLists.then(...);
}

And use the result on call side

gettingStoreCounts().then(/*log, whatever*/)

Thanks Yury, interesting it was more than just waiting for all the promises to resolve—the .map() was need to modify data. [This helped too](http://stackoverflow.com/questions/749084/jquery-map-vs-each). — sansSpoon, Jul 15 '16 at 01:22

Adding additional property to $.ajax() callback with promise

1 Answers1

Linked