AngularJS 1.x getting and chaining multiple API

Question

I'm trying to get multiple APIs to access data but after all this returned empty data without displaying any error. Here is my code:

 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);
         });
       });
     });
   });
 });
}]);

The first API url responded well, however from the second one it returned empty arrays. I wanted to get all data of the railways stations from the 1st API, then concat each station into the 2nd API url, after that I want to get data of trainNum (train number) and deptDate (departure date) to concat into the 3rd API url to access all data of the train compositions there.

Here is examples of

2nd API url: https://rata.digitraffic.fi/api/v1/live-trains?station=HKI (where HKI is Helsinki station).

3rd API url: https://rata.digitraffic.fi/api/v1/compositions/960?departure_date=2017-05-02 (where 960 is the train number, and 2017-05-02 is departure date).

Thank you guys in advance.

Answer 1

This is a great problem for promises. We just need to change some things around so we can rely on them properly.

We're going to want to "chain" these promises to achieve the desired effect. This mostly involves returning the promises created inside of another promise callback. We'll also have to introduce the $q dependency so we can resolve multiple promises concurrently.

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);
    });
}]);