Only 1 Facebook friends is shown - using FB Javascript SDK jQuery

I'm trying to show a list of all Facebook friends of the logged in user. However, using the code as shown below only 1 Facebook friend is shown - instead of all. Anybody any idea what might the issue? I'm using the Facebook Javascript SDK together with jQuery.

Thanks! Ron

      FB.api( {
        method: 'fql.query',
        query: 'SELECT uid, name, pic_square FROM user WHERE uid IN (SELECT uid1 FROM      friend WHERE uid2 = ' + FB.getSession().uid +')'
      },
      function(response) { 
        for(i=0;i<resp开发者_JAVA百科onse.length;i++) {
            $('#friend-info').html('<img src="http://graph.facebook.com/' + response[0].uid + '/picture"><br />').fadeIn('fast');
            }
        } 
      );

Looks to me like you mean to do this:

response[i] instead of response[0]

i is the incrementing variable but you're using 0 as the index each time.

And as Jimmy Sawczuk mentioned, use append() instead of html() (which overwrites the existing html):

Full code with those fixes:

  FB.api( {
    method: 'fql.query',
    query: 'SELECT uid, name, pic_square FROM user WHERE uid IN (SELECT uid1 FROM      friend WHERE uid2 = ' + FB.getSession().uid +')'
  },
  function(response) { 
    for(i=0;i<response.length;i++) {
        $('#friend-info').append('<img src="http://graph.facebook.com/' + response[i].uid + '/picture"><br />').fadeIn('fast');
        }
    } 
  );

However, it looks like Phil probably has a solution for you that could make more sense overall.

$.html overwrites whatever html is in the container, so in addition to what Wesley Murch recommends, you should change your .html to .append.

If you're just after a list of friends, why not use the Graph API instead of a query

FB.api('/me/friends?fields=uid,name,picture', function(response) {
    for(var i = 0; i < response.length; i++) {
        var friend = response[i];
        // etc
    }
});