2012-01-12 23 views
1

我正在构建一个使用Facebook Graph API的Web应用程序,该应用程序在大拼贴画的一个页面上显示所有个人资料图片。从Facebook Graph API中选择JSON中的项目编号

我用下面的代码来使用API​​:

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
    #images { padding:0; margin:0; overflow: hidden;} 
    #images img { width:200px; height:200px; border:none;} 
    #lists li { display: table;} 
    #lists img { width:200px; height: 200px; } 
    </style> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
</head> 
<body> 

<div id="profile"></div> 

<script> 

var fburl = "https://graph.facebook.com/733380053/photos?access_token=AAAAAAITEghMBALj91OSuexVZBpZBVH6d4V8VPJtZAKJmm0YzWWUvHe22hxEXZA6MRDqgAwPyCUlqJTufsVbcc2xUw2bEgqQaW3tePkew1QZDZD" 

$.getJSON(fburl, function(data){ 

    var img = data["picture"]; 
    $("#profile").append("<h3>"+ img +"</h3>"); 

}); 

</script> 
</body> 
</html> 

不过,我希望能够只得到每个画面的图像源

HTML的img追加它SRC标签,从下面的例子:

data: [{id:10150556838025864, from:{name:, id:693815863}, tags:{,…},…},…] 
0: {id:10150556838025864, from:{name:, id:693815863}, tags:{,…},…} 
created_time: "2011-12-22T00:31:40+0000" 
from: {name:, id:693815863} 
height: 540 
icon: "http://static.ak.fbcdn.net/rsrc.php/v1/yz/r/StEh3RhPvjk.gif" 
id: "10150556838025864" 
images: [{height:540, width:720,…}, {height:135, width:180,…}, {height:97, width:130,…},…] 
link: "http://www.facebook.com/photo.php?pid=10920894&id=693815863" 
picture: "http://photos-f.ak.fbcdn.net/hphotos-ak-snc7/394974_10150556838025864_693815863_10920894_526292479_s.jpg" 
position: 34 
source: "http://a6.sphotos.ak.fbcdn.net/hphotos-ak-snc7/s720x720/394974_10150556838025864_693815863_10920894_526292479_n.jpg" 
tags: {,…} 
updated_time: "2011-12-22T00:31:45+0000" 
width: 720 

回答

3

试试这个:

var fburl = "https://graph.facebook.com/733380053/photos?access_token=AAAAAAITEghMBALj91OSuexVZBpZBVH6d4V8VPJtZAKJmm0YzWWUvHe22hxEXZA6MRDqgAwPyCUlqJTufsVbcc2xUw2bEgqQaW3tePkew1QZDZD" 

$.getJSON(fburl, function(data){ 
    //var data = data["data"][0]["picture"]; 
    $.each(data["data"], function() { 
     $a = $("<a></a>").attr("href", this.link); 
     $img = $("<img />").attr("src", this.picture); 
     $a.append($img) 
     $("#profile").append($a); 
    }); 
}); 

修订

Example fiddle

+0

感谢您的答复,对不起,它似乎没有工作。我甚至没有发生错误,它只是没有做任何事情。 – jcrowson 2012-01-12 11:43:44

+1

对不起 - 我没有意识到你访问'data'的方法不正确。我已经更新了我的答案。 – 2012-01-12 11:49:57

+0

绝对英雄。谢谢!作为一个补充 – jcrowson 2012-01-12 11:54:45