flickrapi (js) multiple async calls in a loop

Question

I allmost banged my head into the wall because I can't get the following code too work. I'm trying to code a photo gallery with the flickrApi and have problems with multiple async calls. But perhaps there is a cleaner solution to code this.

openPhotoset() is called when clicking the link of a photoset. Unfortunately getting the description of a photo I need to use a different method, which means another async call. I'm looping through the data, but because I make the call in a loop (that's when I have the photo-id available) the deferred of openPhotoset() doesn't resolve after looping but before. I read and have seen examples of $.when() used in a loop, filling an array with deferreds and checking with $.when but I seem to fail horribly at it. Is this the solution I need or is there another road to salvation? ;)

I want to execute different functions after all calls within openPhotoset() has completed.

        function openPhotoset(photosetId) {
            var currentPhotoset = [],
                deferred = $.Deferred();

            _requestPhotosOfSet(photosetId).done(function(data){
                $(data.photoset.photo).each(function(i, photo){
                    var objPhoto = {};

                    objPhoto.id = photo.id;
                    objPhoto.title = photo.title;
                    objPhoto.farm = photo.farm;
                    objPhoto.server = photo.server;
                    objPhoto.secret = photo.secret;

                    // get photo description
                    requestPhotoInfo(photo.id).done(function(data) {

                        objPhoto.description =  data.photo.description._content;
                        currentPhotoset.push(objPhoto);

                    }).then(function() {
                        // TODO: renders with each iteration, shouldnt!
                        var template = $('#li-gallery').html(),
                            result = Mustache.render(template, {currentPhotoset:currentPhotoset});

                        showGallery();
                        _$fyGallery.find('.gallery-list').html(result);

                        deferred.resolve();

                    });
                });

            });

            return deferred;

        }

Answer 1

You can do this by changing .done() for .then() in a couple of places, and rearranging things a bit - well quite a lot.

I think you've probably been searching for something like this :

function openPhotoset(photosetId) {
    return _requestPhotosOfSet(photosetId).then(function(data) {
        var promises = $(data.photoset.photo).map(function(photo) {
            return requestPhotoInfo(photo.id).then(function(data) {
                return {
                    id: photo.id,
                    title: photo.title,
                    farm: photo.farm,
                    server: photo.server,
                    secret: photo.secret,
                    description: data.photo.description._content
                };
            });
        }).get();//.get() is necessary to convert a jQuery object to a regular js array.
        return $.when.apply(null, promises).then(function() {
            var template = $('#li-gallery').html(),
                result = Mustache.render(template, {
                    currentPhotoset: Array.prototype.slice.apply(arguments)
                });
            showGallery();
            _$fyGallery.find('.gallery-list').html(result);
        });
    });
}

The main difference here is the creation of an array of promises as opposed to an array of photo objects, and allowing the promises to convey the data. This allows $.when() to fire off a callback when all the promises are fulfilled - ie when data objects have been composed for all photos in the set.

Note the use of .map() instead of .each(), thus simplifying the creation of promises.

And finally, the overall promise returned by openPhotoset() allows whatever action to be taken on completion of the whole process. Just chain .then().

openPhotoset(...).then(function() {
    // here, do whatever
});

---

EDIT

The overall pattern is probably easier to understand if the inner workings are pulled out and rephrased as named promise-returning functions - getPhotoInfoObject() and renderData().

function openPhotoset(photosetId) {
    function getPhotoInfoObject(photo) {
        return requestPhotoInfo(photo.id).then(function(data) {
            //$.extend() is much less verbose than copying `photo`'s properties into a new object longhand.
            return $.extend(photo, {description: data.photo.description._content});
        });
    }
    function renderData() {
        var template = $('#li-gallery').html(),
            currentPhotoset = Array.prototype.slice.apply(arguments),
            result = Mustache.render(template, {
                currentPhotoset: currentPhotoset
            });
        showGallery();
        _$fyGallery.find('.gallery-list').html(result);
    }
    // With the inner workings pulled out as getPhotoInfoObject() and renderData(),
    // the residual pattern is very concise and easier to understand.
    return _requestPhotosOfSet(photosetId).then(function(data) {
        var promises = $(data.photoset.photo).map(getPhotoInfoObject).get();
        return $.when.apply(null, promises).then(renderData);
    });
}

Answer 2

I was so blinded by the defereds and $.when function that I didn't notice all I needed was to create a counter and count down each time requestPhotoInfo was done and after render the html