Google Picasa 데이터 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 />'); 
     }); 
    }); 
     }); 
    }); 
}); 

나는 "앨범"정보를 하나의 덩어리가 하나 앨범의 "사진"모든 정보가 따라야 할 것으로 예상 것 : 여기 내 코드입니다. 그 대신, 4 개의 앨범 정보 목록을 뱉어 낸 다음 모든 사진 정보 목록을 뱉어냅니다.

즉

내가 기대했던 :

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로 설정하면됩니다. 여기

코드입니다 : https://gist.github.com/1204385