将jQuery $ .getJSON（）与Google Picasa Data API配合使用

这是我第一次尝试使用Google Data API，而且我使用jQuery的$ .getJSON（）函数获得了意想不到的结果。 这是我的代码：

$(document).ready(function(){ var json_Album_URI = "https://picasaweb.google.com/data/feed/base/" + "user/" + "thewoodsmyth" + "?alt=" + "json" + "&kind=" + "album" + "&hl=" + "en_US" + "&fields=" + "entry(media:group,id)" + "&thumbsize=" + 104; $.getJSON(json_Album_URI, function(data){ $.each(data.feed.entry, function(i,item){ //Thumbnail URL $.each(item.media$group.media$thumbnail, function(i,item){ var album_thumb_URL = item.url; $('#images').append("Album Thumbnail: " + album_thumb_URL + '
'); }); //Album Title var album_Title = item.media$group.media$title.$t; $('#images').append("Album Title: " + album_Title + '
'); //Album Description var album_Description = item.media$group.media$description.$t; $('#images').append("Album Description: " + album_Description + '
'); //Album ID var album_ID = item.id.$t; //Get Numerical ID from URL album_ID = album_ID.split('/')[9].split('?')[0]; $('#images').append("AlbumID: " + album_ID + '

'); var json_Photo_URI = "https://picasaweb.google.com/data/feed/base/" + "user/" + "thewoodsmyth" + "/albumid/" + album_ID + "?alt=" + "json" + "&kind=" + "photo" + "&hl=" + "en_US" + "&fields=" + "entry(media:group)" + "&thumbsize=" + 104; $.getJSON(json_Photo_URI, function(data){ $.each(data.feed.entry, function(i,item){ $('#images').append("Album Photos: 
"); //Photo URL $.each(item.media$group.media$content, function(i,item){ var photo_URL = item.url; $('#images').append("Image Photo URL: " + photo_URL + '
'); }); //Thumbnail URL $.each(item.media$group.media$thumbnail, function(i,item){ var photo_Thumb_URL = item.url; $('#images').append("Image Thumbnail URL: " + photo_Thumb_URL + '
'); }); //Photo Title var photo_Title = item.media$group.media$title.$t; $('#images').append("Image Photo_Title: " + photo_Title + '
'); //Photo Description var photo_Description = item.media$group.media$description.$t; $('#images').append("Image Photo Description: " + photo_Description + '

'); }); }); }); }); }); 

我原本预计，一张专辑的“照片”信息会跟随一大块“专辑”信息。 相反，它最终会吐出所有四张专辑的信息列表，然后是所有照片信息的列表。

即

我的期望：

 album_1 info album_1 photo_1 album_1 photo_2 album_1 photo_3 /album_1 info album_2 info album_2 photo_1 album_2 photo_2 album_2 photo_3 /album_2 info ...etc 

我得到了什么：

 album_1 info album_2 info album_3 info ...etc album_1 photo_1 album_1 photo_2 album_1 photo_3 album_2 photo_1 album_2 photo_2 album_2 photo_3 album_3 photo_1 album_3 photo_2 album_3 photo_3 ...etc 

我错过了什么？

Answer 1

这里的问题是，第二个getJSON不能异步！ 因为你想在相册里面添加照片！ 所以要使其工作只需将第二次调用’getJSON’更改为’$ .ajax’并将其设置为async：false。

这是代码：

 $.ajax({ type: 'GET', url: json_Photo_URI, success : function(data){ $.each(data.feed.entry, function(i,item){ $('#images').append("Album Photos: 
"); //Photo URL $.each(item.media$group.media$content, function(i,item){ var photo_URL = item.url; $('#images').append("Image Photo URL: " + photo_URL + '
'); }); //Thumbnail URL $.each(item.media$group.media$thumbnail, function(i,item){ var photo_Thumb_URL = item.url; $('#images').append("Image Thumbnail URL: " + photo_Thumb_URL + '
'); }); //Photo Title var photo_Title = item.media$group.media$title.$t; $('#images').append("Image Photo_Title: " + photo_Title + '
'); //Photo Description var photo_Description = item.media$group.media$description.$t; $('#images').append("Image Photo Description: " + photo_Description + '

'); }); }, dataType: 'json', async: false }); 

我还发布了完整的HTML文件： https ： //gist.github.com/1204385