Question

I am trying to count friends’ gender with Facebook JavaScript API. The problem is FB SDK is based on async call so I cannot fire an action after all the queries are done.

For example, here is code to count how many male/female friends I have. But the last line won’t work as it can get executed while FB.api() is still running.

What’s the best way to handle this?

FB.api('/me/friends', function(response) {
    if(response.data) {
        var genderCount = {};

        $.each(response.data, function(index, friend) {
            FB.api('/' + friend.id, function(frienddata) {
                if (frienddata.gender) {
                    if (genderCount[frienddata.gender]) {
                        genderCount[frienddata.gender]++;
                    }
                    else {
                        genderCount[frienddata.gender]=1;
                    }
                }
            });
        });
});

// later do something with genderCount

alert('I have ' + genderCount['male'] + ' male friends'); // won't work

Answer 1

First of all, you probably want to use a more efficient fql query, such as

SELECT name, sex, uid 
FROM user 
WHERE uid in (
  SELECT uid2 
  FROM friend 
  WHERE uid1 = me()
)

Simply pass this to graph.facebook.com/fql?q=SELECT%20%name....

Then, move the alert into the response handler, after you have completed summing up the numbers.

FB.api('/fql', 
  {q: "SELECT name, sex, uid FROM user WHERE uid in (SELECT uid2 FROM friend WHERE uid1 = me())"}, 
  function (response) {
    if (response.data) {
        var genderCount = {
            male: 0,
            female: 0,
            unknown: 0
        };
        response.data.forEach(function (row) {
            genderCount[row.sex || 'unknown']++;
        });
        alert(JSON.stringify(genderCount));
    }
});