$ .getJSON, $ .each и переменная область

Question

Я весь день просматривал форумы, но я не понимаю.

Я звоню в Justin.TV-API, чтобы отобразить список моих «последующих» потоков, а затем выполнить вложенный вызов, чтобы проверить, какой из них находится в сети.

Вот код, я хотел использовать:

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

Затем я наткнулся на проблемы с getJSON и asychronisation и переписал мой сценарий пару раз:

первый как это (замена $ .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 />'); 
      } 
     }); 

то, как это (замена getJSON с не 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 />'); 
       } 
      } 
     }); 

ни в коем случае я могу передать зрителям-переменной (которая записывается в гнездовой Апи-вызова, чтобы определить, если поток онлайн и сколько зрителей он имеет) к

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

Моему выход всегда неопределенные:

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

Я сделал несколько проверок с добавлениями и предупреждениями - ответы JSON действительны.

Кто может мне помочь?

Большое спасибо за ваше время.

Answer 1

Ajax является асинхронным, все, что нуждается в доступе к переменной viewers после ее заполнения, должно находиться внутри полного обратного вызова запроса ajax.

Отложенные объекты - это путь сюда, я подниму небольшую демоверсию.

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

не нужно отложенной объекты, просто реструктурированных немного.

//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:
Другой способ сделать это:

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();​ 

однако, каналы в настоящее время не возвращаются никаких результатов, я не думаю, что это связано с этим кодом.

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