Использование jQuery $ .getJSON () с Google Picasa Data API - PullRequest
Новая
       37

Использование jQuery $ .getJSON () с Google Picasa Data API

1 голос
/ 08 сентября 2011

Это моя первая попытка использования API данных Google, и я получаю неожиданные результаты с помощью функции 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

Что мне не хватает?

1 Ответ

4 голосов
/ 08 сентября 2011

Проблема здесь в том, что второй 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

...