1

これは 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 />');
        });
    });
        });
    });
});

「アルバム」情報の 1 つのチャンクの後に、その 1 つのアルバムのすべての「写真」情報が続くことを期待していました。代わりに、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

私は何が欠けていますか？

4

1 に答える 1

4

ここでの問題は、2 番目の getJSON を非同期にできないことです。アルバム内に写真を追加したいからです。'getJSON' の 2 回目の呼び出しを '$.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

于 2011-09-08T19:13:12.920 に答える