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

将jQuery $ .getJSON（）与Google Picasa Data API一起使用

1 个答案: