Question

我试图显示一些用户的Facebook好友列表，每个好友都有自己的<div>。这就是我想要做的事情：

for (var i=0;i<responseArray.length+1;i++){
   friend = response['data'][i];
   friends.push(friend.id);
   $('#sidebar').append('<div class="friendbox" id="'+friend.id+'"></div>');
   FB.api(
       "/"+friend.id+"/picture",
       {
           "redirect": false,
           "height": "100",
           "type": "square",
           "width": "100"
       },
       function (response) {
         if (response && !response.error) {
           $('#'+friend.id+'').append('<img class="friendpic" src="'+response['data']['url']+'">');
         }
       }
   );
   FB.api(
       "/"+friend.id+"",
       function (response) {
         if (response && !response.error) {
           console.log(response);
           $('#'+friend.id+'').append(response['first_name']);
         }
       }
   );
}

但是有一个问题 - 图片和名称没有被放入我已指定放入的<div>中。我认为循环在从Facebook收到数据之前进入下一次迭代，然后当收到数据时，它被添加到错误的<div>。

如何让它将正确的内容粘贴到正确的容器中？

由于

Answer 1

我不知道你为什么要拨打太多的facebook电话，只需一次通话即可完成。

您没有提及responseArray的任何地方，但很可能是/me/friends的结果。现在，根本不需要你在循环中进行的调用。

首先，将/me/friends更改为/me/friends?fields=first_name（如果稍后需要逗号分隔，则可以添加更多字段）。然后在循环中执行此操作 -

for (var i=0; i<response['data'].length; i++){
   friend = response['data'][i];
   friends.push(friend.id);
   $(document.body).append('<div class="friendbox" id="'+friend.id+'"></div>');
   $('#'+friend.id+'').append('<img class="friendpic" src="https://graph.facebook.com/'+friend.id+'/picture?height=100&width=100&type=square">');
   $('#'+friend.id+'').append(friend['first_name']);
}

其中，response是/me/friends?fields=first_name

的结果

就是这样！：）

使用Javascript动态创建div和获取内容

1 个答案: