Question

Using javascript I get list of facebook friends though it only returns name and id now, but I need to get the picture of each user. I try to loop through the response and then try to call the api to get picture, but due to it’s async call I can’t associate the returned picture with the index of the friend in the array. *this is kinda a problem that I’ve had with asynchronous programming in general, is there a standard pattern for this?

Example.

FB.api('me/friends', function(response) {
    if(response.error == null){
        var friendsSale = response.data;
        var len = friendsSale.length;
        for(var x=0; x<len; x++){               
                FB.api(friendsSale[x].id+'/picture', function(response) {
                    //x no longer is the same x as the initial call, and I can't pass in the orignal array object into the FB.api function to return as part of the response... or can I?
                    friendsSale[x].pictureUrl = response;
                });
            }
        }
        //Then how do I know when I have all the pictures set so I can then set datamodle with the complete friend array?
        m.friends(friendsSale);
    }
});

Answer 1

Yes, there is a pattern for this: a Closure

    ...
    var len = friendsSale.length;
    for (var i = 0; i < len; i++) {
        (function() {
            var j = i;             
            FB.api(friendsSale[i].id+'/picture', function(response) {
                friendsSale[j].pictureUrl = response;
            });
        })();
    }

To know when all all calls have returned you can simply keep a counter of returned calls, e.g.

    ...
    var len = friendsSale.length;
    var returnedCallsCounter = 0;

    for (var i = 0; i < len; i++) {
        (function() {
            var j = i;             
            FB.api(friendsSale[i].id+'/picture', function(response) {
                friendsSale[j].pictureUrl = response;

                // Track number of returned calls
                returnedCallsCounter++;

                // Check if all calls have returned
                if (returnedCallsCounter == len) {
                    m.friends(friendsSale);
                }
            });
        })();
    }