Facebook循环返回JSON Open Graph请求

时间:2013-05-16 22:13:14

标签: javascript jquery json facebook-graph-api jsonp

我目前正在通过JSON请求Open Graph网址,如下所示:

https://graph.facebook.com/me/friends?fields=email,likes,name,birthday,location,website&access_token=$token

我的JSON请求是成功的,但我的问题是实际循环返回的数据,以便我可以在我的页面上列出它。

我尝试了以下内容:

$('#goButton').click(function () {

        //Call the JSON feed from the Open Social Graph.
        $.getJSON("https://graph.facebook.com/me/friends?fields=email,likes,name,birthday,location,website&access_token=" + savedFbToken + "&callback=?",
              //Once it is returned, do something with the JSON:
              function (data) {

                console.log(data);
                  //Clear out the placeholder
                  $('#Placeholder').html("");
                  //Add some new data
                  $('#Placeholder').append("<h1>Name:</h1>" + data.name + "");
                  $('#Placeholder').append("<span>Birthday: "+ data.birthday +"</span><br/>");
                  $('#Placeholder').append("<span>Location: "+ data.location +"</span><br/>");
                  $('#Placeholder').append("<span>Id: "+ data.id +"</span><br/><br/>");
              });
    });

返回的格式如下所示:

{
   "data": [
      {
         "name": "Name 1",
         "birthday": "10/08/1983",
         "location": {
            "id": "110343502319180",
            "name": "Copenhagen, Denmark"
         },
         "id": "263901486"
      },
      {
         "name": "Name 2",
         "birthday": "02/16/1982",
         "location": {
            "id": "110398488982884",
            "name": "Reykjav\u00edk, Iceland"
         },
         "id": "502533736"
      },
    etc...

有关如何正确循环的任何建议吗?

1 个答案:

答案 0 :(得分:2)

data实际上包含一个对象,其对象数组也称为数据,因此您需要循环遍历

$('#Placeholder').html("");

for( var i = 0; i < data.data.length; i++ ){
 //Add some new data
 $('#Placeholder').append("<br />");
 $('#Placeholder').append("<h1>Name:</h1>" + data.data[i].name + "");
 $('#Placeholder').append("<span>Birthday: "+ data.data[i].birthday +"</span><br/>");
 $('#Placeholder').append("<span>Location: "+ data.data[i].location +"</span><br/>");
 $('#Placeholder').append("<span>Id: "+ data.data[i].id +"</span><br/><br/>");
}