Using a FB.Api within another FB.Api

Question

I’m doing a feature to make a list with 10 facebook friends with 10 posts (status) each. The code below performs the searches in a certain way, however the div "Friend" + id does not receive the content in the divFriendsPost.innerHTML = friendPosts line, although the content is correct.

JS

FB.api('/me/friends?limit=10', function(fResponse) {
    console.dir(fResponse);
    var divFriendsList = document.getElementById('friendsList');
    var friend_data = fResponse.data.sort(sortMethod);
    var newLine = '';
    for(var i = 0; i < friend_data.length; i++) {
        newLine += '<p>';
        newLine += '<img src="https://graph.facebook.com/' + friend_data[i].id + '/picture">';
        newLine += '<em>' + friend_data[i].name + '</em>';
        newLine += '</p>';
        newLine += '<div id="friend' + friend_data[i].id + '" class="friendPosts"></div>';

        FB.api({method: 'fql.query', query: 'SELECT message FROM status WHERE uid = ' + friend_data[i].id + ' LIMIT 10'},
            function(posts){
                var divFriendsPost = document.getElementById('friend' + friend_data[i].id);
                var friendPosts = '';
                for(var j=0; j < posts.length ; j++) {
                    friendPosts += '<p>' + posts[j].message + '</p>';
                }
                divFriendsPost.innerHTML = friendPosts;
            }
    );
    }
    divFriendsList.innerHTML = newLine;
});

From what I’ve read, it has to do with the asynchronous request. How do you fix this?

Answer 1

What happens is that the Divs are not yet in the gift when you do the "Document.getElementById('Friend'..." and with it the var divFriendsPost is empty. Therefore, if you insert the newline into the for should work. Something like:

FB.api('/me/friends?limit=10', function(fResponse) {
    console.dir(fResponse);
    var divFriendsList = document.getElementById('friendsList');
    var friend_data = fResponse.data.sort(sortMethod);
    for(var i = 0; i < friend_data.length; i++) {
        var newNode = document.createElement('div');
        var newLine = '<p>';
        newLine += '<img src="https://graph.facebook.com/' + friend_data[i].id + '/picture">';
        newLine += '<em>' + friend_data[i].name + '</em>';
        newLine += '</p>';
        newLine += '<div id="friend' + friend_data[i].id + '" class="friendPosts"></div>';
        newNode.innerHTML = newLine;
        divFriendList.appendChild(newNode);
        FB.api({method: 'fql.query', query: 'SELECT message FROM status WHERE uid = ' + friend_data[i].id + ' LIMIT 10'},
            function(posts){
                var divFriendsPost = document.getElementById('friend' + friend_data[i].id);
                var friendPosts = '';
                for(var j=0; j < posts.length ; j++) {
                    friendPosts += '<p>' + posts[j].message + '</p>';
                }
                divFriendsPost.innerHTML = friendPosts;
            }
        );
    }
});