Angularjs – 多个$http REST调用(第二个调用依赖于第一个输出)

发布时间：2020-12-17 17:21:13 所属栏目：安全来源：网络整理

导读：我是AngularJs世界的新手 – 我试图从两个REST WS调用中获取数据. 第一个返回一组数据(工作正常) – 使用第一个数据的值,我需要进行另一个webservice调用并检索数据并在表中打印. 以下是我到目前为止所尝试的内容： HTML： table ng-table="tableParams" id=

我是AngularJs世界的新手 – 我试图从两个REST WS调用中获取数据.

第一个返回一组数据(工作正常) – 使用第一个数据的值,我需要进行另一个webservice调用并检索数据并在表中打印.

以下是我到目前为止所尝试的内容：
HTML：

<table ng-table="tableParams" id="request_table" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
    <tr>
        <th>Number</th>
        <th>Price</th>
        <th>Short Description</th>
        <th>Requested for</th>
        <th>State</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="request in req_list | orderBy:sortType:sortReverse | filter: searchItem">
        <p ng-repeat="item in fetchRequest(request.price)"></p>

        <td>{{request.number }}</td>
        <td>{{request.price}}</td>
        <td>{{request.short_description}}</td>
        <td>{{request.requested_for.display_value}}</td>
        <td>{{request.stage}}</td>
    </tr>

</tbody>

脚本：

angular.module('sc_request_list')
            .controller('MyRequestItems',[
                '$scope','$http',function($scope,$http) {
                    $scope.sortType = 'number' //set the default sort type
                    $scope.sortReverse = false; // set the default sort order
                    $scope.searchItem // set the default search/filter term
                    $scope.itemUrl = '/api/sc_request';
                    $scope.reqUrl = '/api/sc_req_item';
                    $http.defaults.headers.common.Accept = "application/json";
                    $scope.fetchRequestItemList = function() {
                        $http({
                            method: 'GET',url: $scope.itemUrl,}).


                        success(function(data,status) {
                            var result = data;
                            var json = JSON.stringify(result);
                            var data = JSON.parse(json);
                            $scope.req_list = data.result; // response data 

                        }).
                        error(function(data,status) {
                            $scope.req_list = [{
                                "req_list": "Error fetching list"
                            }];
                        });

                    }

                    $scope.fetchRequest = function(request) {
                        console.log("Request Number is: " + request);
                        $http({
                            method: 'GET',url: $scope.reqUrl + "/" + request,status) {
                            var result = data;
                            var json = JSON.stringify(result);
                            var data = JSON.parse(json);
                            $scope.req = data.result; // response data 

                        }).
                        error(function(data,status) {
                            $scope.req = [{
                                "req": "Error fetching list"
                            }];
                        });

                    }
                }


            ]);

任何帮助很多appreaciated.

解决方法

您的调用是异步调用的,因此在进行调用时,其余代码仍在执行.从而,

<p ng-repeat="item in fetchRequest(request.price)"></p>

在request.price甚至定义之前执行.

您需要做的是将呼叫链接到您的api呼叫：

$http({
  method: 'GET',}).


success(function(data,status) {
  var result = data;
  var json = JSON.stringify(result);
  var data = JSON.parse(json);
  $scope.req_list = data.result; // response data 
  
  //Loop through requests
  $scope.req_list.foreach(function (elem,index) {
    //chained call is here
    $scope.fetchRequest(elem.price,index);
  });
}).

error(function(data,status) {
  $scope.req_list = [{
    "req_list": "Error fetching list"
  }];
});

$scope.fetchRequest = function(request,index) {
  console.log("Request Number is: " + request);
  $http({
    method: 'GET',}).

  success(function(data,status) {
    var result = data;
    var json = JSON.stringify(result);
    var data = JSON.parse(json);
    //Attach result of api call to apropriate element of req_list array
    $scope.req_list[index].items = data;

  }).
  error(function(data,status) {
    $scope.req = [{
      "req": "Error fetching list"
    }];
  });

}
}

然后改变：

<p ng-repeat="item in fetchRequest(request.price)"></p>

至：

<p ng-repeat="item in request.items"></p>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!