AngularJS 1.x получает и связывает несколько API

Question

Я пытаюсь получить несколько API для доступа к данным, но после всего этого вернулись пустые данные без каких-либо ошибок. Вот мой код:

 var myApp = angular.module("myApp", []);

 // Main controller
 myApp.controller("appCtrl", ["$scope", "$http", function($scope, $http){

   // Variables of stations, train number and departure date
   var sta = "";
   var trainNum = "";
   var deptDate = "";

   // Get stations data  
   $http.get("https://rata.digitraffic.fi/api/v1/metadata/stations.json").then(function(response){
     // Load the stations data
     $scope.stations = response.data;

     // Access all stations data
     angular.forEach($scope.stations, function(value,index){

       sta = $scope.stations[index].stationShortCode;
       //console.log(sta);

       // Get train data from each station
       $http.get("https://rata.digitraffic.fi/api/v1/live-trains?station=" + sta + ".json").then(function(response){
         $scope.trains = response.data;
         //console.log(response.data);

         // Access all train data
         angular.forEach($scope.trains, function(value, index){
           trainNum = $scope.trains[index].trainNumber;
           deptDate = $scope.trains[index].departureDate;

         // Get all train compositions data from all train data above
         $http.get("https://rata.digitraffic.fi/api/v1/compositions/" + trainNum + "?departure_date=" + deptDate + ".json").then(function(response){
           $scope.trainCompositions = response.data;
           //console.log(response.data);
         });
       });
     });
   });
 });
}]);

Первый URL-адрес API отвечал хорошо, однако из второго он возвращал пустые массивы. Я хотел получить все данные о станциях железных дорог из 1-го API, затем объединить каждую станцию ​​во 2-й URL-адрес API, после чего я хочу получить данные trainNum (номер поезда) и deptDate (дата отправления) для объединения в 3-й API URL для доступа ко всем данным составов поезда там.

Вот примеры

URL второго API: https://rata.digitraffic.fi/api/v1/live-trains?station=HKI (где HKI - станция Хельсинки).

URL-адрес третьего API: https://rata.digitraffic.fi/api/v1/compositions/960?departure_date=2017-05-02 (где 960 - номер поезда, а 2017-05-02 - дата отправления).

Спасибо, ребята заранее.

Answer 1

Это большая проблема для обещаний. Нам просто нужно изменить некоторые вещи вокруг, чтобы мы могли положиться на них должным образом.

Мы собираемся "связать" эти обещания для достижения желаемого эффекта. Это в основном включает возврат обещаний, созданных внутри другого обратного вызова обещания. Мы также должны представить $q зависимость, поэтому мы можем разрешить несколько обещаний одновременно.

var myApp = angular.module("myApp", []);

// Main controller
myApp.controller("appCtrl", ["$scope", "$http", "$q", function ($scope, $http, $q) {

    // Get stations data  
    $http.get("https://rata.digitraffic.fi/api/v1/metadata/stations.json").then(function (response) {
        // Load the stations data
        $scope.stations = response.data;

        // We need to map the following requests into an array of promises so we can resolve them concurrently.
        var stationPromises = $scope.stations.map(function (station) {
            // Use the "angular way" to define query parameters.
            return $http.get("https://rata.digitraffic.fi/api/v1/live-trains", {
                params: { station: station.stationShortCode }
            }).then(function (response) {

                // Assign this set of trains to the station so we don't overwrite other staions trains...
                station.trains = response.data;

                // Another set of promises to get all of the departure information for each train.
                var trainPromises = station.trains.map(function (train) {
                    // Lets use the "angular way" to define parameters again.
                    return $http.get("https://rata.digitraffic.fi/api/v1/compositions/" + train.trainNumber, {
                        params: { departure_date: train.departureDate }
                    }).then(function (response) {
                        // Assign this set of compositions to the train so we don't overwrite other compositions for other trains...
                        train.compositions = response.data;
                    });
                });

                return $q.all(trainPromises);
            });
        });

        // Resolve all of the promises.
        return $q.all(stationPromises);
    }).catch(function (err) {
        // Something bad happended...
        console.error(err);
    });
}]);