AngularJS 1.x获取和链接多个API

我试图获取多个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);
         });
       });
     });
   });
 });
}]);

第一个API url响应良好，但第二个API url返回空数组。我想从第一个API获取所有铁路站点的数据，然后将每个站点连接到第二个API url中，然后我想将trainNum（列车编号）和deptDate（发车日期）的数据连接到第三个API url中，以访问那里的所有列车组成数据

下面是一些例子

第二个API url：（其中HKI是赫尔辛基站）

第三个API url：（其中960为车次号，2017-05-02为发车日期）

---

提前谢谢大家。

这对于承诺来说是个大问题。我们只需要改变一些事情，这样我们就可以正确地依赖它们

我们将要“连锁”这些承诺，以达到预期的效果。这主要涉及返回在另一个承诺回调中创建的承诺。我们还必须引入

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

---

我认为这里的问题是，$http服务使请求异步，但是您的第一个forEach不会等待内部请求完成。或者尝试以同步方式发出内部请求，或者更好地更改API，这样您只需发出一个异步调用（这将比您当前正在执行的操作快得多）。谢谢你的解释，下面杰克·霍尔辛格的代码解决了这里的所有问题。好吧，我真是太感谢你了。我从这些代码中学到了很多。顺便说一下，现在我可以在ng repeat指令“station in stations”下返回{{station.stationName}}来呈现所有的站点名称，但是我不能对trains和train.compositions做同样的事情，因为它们是多个数组，根据您的代码，station.trains和train.compositions没有$scope参数。您知道解决方法吗？您应该在

车站上使用
ng repeat
。对于
车站，在
ng repeat
内使用
trains
。这里有一把简单的小提琴：非常感谢。但是，数据非常多，在我的计算机中加载的时间也很长，现在我只想搜索一个特定的站点，在该站点上只发出一个请求，然后将站点参数传递到API站点。例如，我创建了一个搜索框和提交按钮，当我键入“Helsinki”并单击首页中的提交按钮时，API将为“”以加载数据。你觉得这个怎么样？我很抱歉在这个问题上打扰了你太多，但我想了解更多：（我建议你用下拉菜单来选择电台，这样你就不用猜了。我还建议你遵循一些教程，这样你就可以自己学习这些基本功能了，我不能为你做一切：）。祝你好运