Question

I’ve been looking through forums all day, but I’m not figuring it out.

I’m calling the Justin.TV-API to display a list of my “followed” streams and then doing a nested call to check which one of them is online.

Here is the code I’m wanting to use:

//Get Favorites as Object "favs"
        var viewers;
        $.getJSON('http://api.justin.tv/api/user/favorites/hubschrauber.json?jsonp=?', function(favs) {
            $.each(favs, function(key, value) {
                //For every Object, check if user is referenced in stream and therefore online
                $.getJSON('http://api.justin.tv/api/stream/list.json?channel=' + favs[key].login + '&jsonp=?', function(streams) {
                    viewers = streams[0].channel_count;
                });
                $('#result').append(favs[key].title + ' ' + key + ': ' + favs[key].login + ' (' + viewers + ') Viewers<br />');
            });
        });

I then came across the problems with getJSON and asychronisation and rewrote my script a couple of times:

first like this (replacing the $.each):

//Get Favorites as Object "favs"
        var viewers;
        $.getJSON('http://api.justin.tv/api/user/favorites/hubschrauber.json?jsonp=?', function(favs) {
            for (var key in favs) {
                //For every Object, check if user is referenced in stream and therefore online
                $.getJSON('http://api.justin.tv/api/stream/list.json?channel=' + favs[key].login + '&jsonp=?', function(streams) {
                    viewers = streams[0].channel_count;
                });
                $('#result').append(favs[key].title + ' ' + key + ': ' + favs[key].login + ' (' + viewers + ') Viewers<br />');
            }
        });

then like this (replacing getJSON with non-asynchronus ajax):

var favs;
        var streams;
        var viewers;
        $.ajax({
            url: 'http://api.justin.tv/api/user/favorites/hubschrauber.json?jsonp=?',
            async: false,
            dataType: 'json',
            success: function(favs) {
                for (var key in favs) {
                    $.ajax({
                        url: 'http://api.justin.tv/api/stream/list.json?channel=' + favs[key].login + '&jsonp=?',
                        async: false,
                        dataType: 'json',
                        success: function(streams) {
                            viewers = streams[0].channel_count;
                        }
                    });
                    $('#result').append(favs[key].title + ': ' + favs[key].login + ' (' + viewers + ') Viewers<br />');
                }
            }
        });

In no cases I am able to pass the viewers-variable (which is written in the nested api-call to determine if the stream is online and how many viewers it has) to

$('#result').append(favs[key].title + ': ' + favs[key].login + ' (' + viewers + ') Viewers<br />');

My output is always undefined:

Day[9]: day9tv (undefined) Viewers
FollowGrubby: followgrubby (undefined) Viewers
OneMoreGame.TV: onemoregametv (undefined) Viewers

I have done several checks with appends and alerts – the JSON-responses are valid.

Who can help me out?

Thank you very much for your time.

Answer 1

Ajax is asynchronous, anything that needs access to the viewers variable after it is populated needs to be inside of the complete callback of the ajax request.

Deferred objects would be the way to go here, i’ll whip up a small demo.

Update:
http://jsfiddle.net/cMKkQ/

didn’t need deferred objects, just restructured a little.

//Get Favorites as Object "favs"
$.getJSON('http://api.justin.tv/api/user/favorites/hubschrauber.json?jsonp=?', function(favs) {
    $.each(favs, function(key, value) {
        //For every Object, check if user is referenced in stream and therefore online
        $.getJSON('http://api.justin.tv/api/stream/list.json?channel=' + favs[key].login + '&jsonp=?', function(streams) {
            $('#result').append(value.title + ' ' + key + ': ' + value.login + ' (' + streams[0].channel_count + ') Viewers<br />');
        });
    });
});

​Update:
Another way to do it:

var favorites = [];
function processFavorites () {
    $("#result").empty();
    $.each(favorites,function(index,obj){
        // here we populate the results div
        $('#result').append(obj.title + ' ' + index + ': ' + obj.login + ' (' + obj.viewers + ') Viewers<br />');
    });
}
function getFavorites () {
    favorites = [];
    $.getJSON('http://api.justin.tv/api/user/favorites/hubschrauber.json?jsonp=?', function(favs) {
        var defArr = [];
        $.each(favs, function(key, value) {
            //For every Object, check if user is referenced in stream and therefore online
            defArr.push($.getJSON('http://api.justin.tv/api/stream/list.json?channel=' + favs[key].login + '&jsonp=?', function(streams) {
                favorites.push({title:value.title,key:key,login:value.login,viewers:streams[0].channel_count});
            }));
        });
        $.when.apply($,defArr).always(function(){
            processFavorites();
        });
    });
}
// this runs the process of getting and processing favorites. Run it when you want.
getFavorites();​

however, the feeds are currently returning no results, i don’t think it’s related to this code.

http://jsfiddle.net/cMKkQ/3/