在Google Picasa Data API中使用jQuery $ .getJSON（）

Question

这是我第一次尝试使用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 + '<br />'); 
      }); 
      //Album Title 
      var album_Title = item.media$group.media$title.$t; 
      $('#images').append("Album Title: " + album_Title + '<br />'); 
      //Album Description 
      var album_Description = item.media$group.media$description.$t; 
      $('#images').append("Album Description: " + album_Description + '<br />'); 
      //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 + '<br /><br />'); 

    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: <br />"); 
      //Photo URL 
      $.each(item.media$group.media$content, function(i,item){ 
       var photo_URL = item.url; 
       $('#images').append("Image Photo URL: " + photo_URL + '<br />'); 
      }); 
      //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 + '<br />'); 
      }); 
      //Photo Title 
      var photo_Title = item.media$group.media$title.$t; 
      $('#images').append("Image Photo_Title: " + photo_Title + '<br />'); 
      //Photo Description 
      var photo_Description = item.media$group.media$description.$t; 
      $('#images').append("Image Photo Description: " + photo_Description + '<br /><br />'); 
     }); 
    }); 
     }); 
    }); 
}); 

我本来预计的“专辑”信息单块之后将所有的一个专辑中的“照片”的信息。相反，它最终将所有四张专辑的信息清单，然后列出所有照片的信息。

即

我期待什么：

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: <br />"); 
      //Photo URL 
      $.each(item.media$group.media$content, function(i,item){ 
       var photo_URL = item.url; 
       $('#images').append("Image Photo URL: " + photo_URL + '<br />'); 
      }); 
      //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 + '<br />'); 
      }); 
      //Photo Title 
      var photo_Title = item.media$group.media$title.$t; 
      $('#images').append("Image Photo_Title: " + photo_Title + '<br />'); 
      //Photo Description 
      var photo_Description = item.media$group.media$description.$t; 
      $('#images').append("Image Photo Description: " + photo_Description + '<br /><br />'); 
     }); 
    }, 
    dataType: 'json', 
    async: false 

}); 

我还贴出完整的HTML文件的工作： https://gist.github.com/1204385