Question

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.

ie

What I expected:

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

What I’m getting:

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

What am I missing?

Answer 1

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.

here is the code:

$.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

});

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