AngularJS - Выполняется ли код контроллера по строкам?

Question

Я новичок в AngularJS и экспериментирую с AngularJS с Twitch API.

У меня есть список каналов, которые меня интересуют, определяемые как var channels.

Затем я использую функцию $http.get для прохождения через другой массив, twitchList.channels, который содержит адреса API, которые я должен назвать.

(function() { 
    var app = angular.module('twitchList', []); 

    app.controller('twitchController', ['$http', function($http){ 
    var twitchList = this; 
    twitchList.channels = []; 
    var channels = ["freecodecamp", "storbeck", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff", "MedryBW"]; 

    for (var i = 0; i < channels.length; i++) { 
     twitchList.channels.push({ 
     name: channels[i], 
     api: 'https://api.twitch.tv/kraken/streams/' + channels[i], 
     }) 
    } 

    var data_list = []; 
    for (var j = 0; j < twitchList.channels.length; j++) { 
     $http.get(twitchList.channels[j].api).success(function(data){ 
     data_list.push(data); 
     }) 
    } 

    // Issue arises here! 
    console.log(data_list); 
    console.log(data_list.length); 

    }]); 

})(); 

В API вызовы, кажется, работает отлично, однако, мне нужно, чтобы получить результаты вызова API в массив, называемый data_list. Теперь, когда я печатаю data_list и data_list.length, происходит то, что data_list.length всегда возвращает 0, а data_list иногда заполняется (это означает, что это либо массив размера 0, либо массив 9 размера). Несмотря на то, что свойство массива имеет длину 9, но вызов .length всегда дает 0.

Это позволяет мне думать, что код контроллера не выполняется по строкам? Или что-то не так с моей логикой?

Может ли кто-нибудь дать мне указатель? Благодаря

Answer 1

Нет, эта линия:

data_list.push(data); 

будет выполняться, когда вы получите ответ на запрос HTTP послал строку выше. Поэтому следующие строки:

console.log(data_list); 
console.log(data_list.length); 

выведет [] и 0

Answer 2

Я не использовал его раньше, но вы могли бы, возможно, использовать $q.all для того, чтобы решить несколько обещаний? Я использовал эквивалентную функцию $.when в jQuery для достижения этого в прошлом.

var data_list = []; 
var promise_array = []; 
var request; 

for (var j = 0; j < twitchList.channels.length; j++) { 
    request = $http.get(twitchList.channels[j].api); 
    request.success(function(data) { 
     data_list.push(data); 
    }); 
    promise_array.push(request); 
} 

$q.all(promise_array).then(function() { 
    console.log(data_list); 
    console.log(data_list.length); 
});