将jQuery $ .getJSON()与Google Picasa数据API结合使用 [英] Using jQuery $.getJSON() with Google Picasa Data API

问题描述

这是我第一次尝试使用Google Data API，并且使用jQuery的$ .getJSON()函数获得了意外的结果.这是我的代码:

This is my first attempt at using the Google Data API, and I'm getting unexpected results using jQuery's $.getJSON() function. Here is my code:

$(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 />');
        });
    });
        });
    });
});

我原本希望在单个专辑的照片"信息之后跟随单个专辑"信息.取而代之的是，它最终吐出了所有四个相册信息的列表，然后是所有照片信息的列表.

I would have expected that a single chunk of "album" information would be followed by all of that one album's "photo" information. Instead, it ends up spitting out a list of all four albums' info, and then a list of all of the photos' info.

即

我所期望的:

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

我想念什么?

推荐答案

这里的问题是，第二个getJSON不能异步！因为您只想将照片添加到相册中！因此，要使其工作，只需将第二个"getJSON"调用更改为"$ .ajax"并将其设置为异步:false.

The problem here is, that the second getJSON cannot be asynchronous! because you want to add the photos inside the album just! so to make it work just change your second calling of 'getJSON' to '$.ajax' and set it as 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

i also posted the full HTML file working: https://gist.github.com/1204385

这篇关于将jQuery $ .getJSON()与Google Picasa数据API结合使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！