在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