如何为多个记录按顺序在循环中运行API

angularjs node.js

47 观看

2回复

62 作者的声誉

有一个HTML表,其中的数据应该通过节点API来传递。

<table cellpadding="0" cellspacing="0">
    <thead>
        <tr>
            <th>Row1</th>
            <th>Row2</th>
            <th>Row3</th>
            <th>Row4</th>
            <th>Row5</th>
            <th>Row6</th>
            <th>Row7</th>
            <th>Row8</th>
            <th>Row9</th>
            <th>Row10</th>
            <th>Row11</th>
            <th>Row12</th>
            <th>Row13</th>
            <th>Row14</th>
            <th>Row15</th>
            <th>Row16</th>
            <th>Row17</th>
            <th>Row18</th>
            <th>Row19</th>
            <th>Row20</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="row in array track by $index">
            <td>{{row.value1}}</td>
            <td>{{row.value2}}</td>
            <td>{{row.value3}}</td>
            <td>{{row.value4}}</td>
            <td>{{row.value5}}</td>
            <td>{{row.value6}}</td>
            <td>{{row.value7}}</td>
            <td>{{row.value8}}</td>
            <td>{{row.value9}}</td>
            <td>{{row.value10}}</td>
            <td>{{row.value11}}</td>
            <td>{{row.value12}}</td>
            <td>{{row.value13}}</td>
            <td>{{row.value14}}</td>
            <td>{{row.value15}}</td>
            <td>{{row.value16}}</td>
            <td>{{row.value17}}</td>
            <td>{{row.value18}}</td>
            <td>{{row.value19}}</td>
            <td>{{row.value20}}</td>
        </tr>
    </tbody>
</table>

我的角度指令代码:-

ApiServices.getArrayData(value).then(function (response) {
            scope.array = response.data; // This is an array of objects
            for (var i = 0; i < scope.array.length; i++) {
                ApiServices.getOtherDetails(scope.array[i].id).then(function (response) {
                    scope.array[i].value2 = response.data.value2;
                    scope.array[i].value3 = response.data.value3;
                    scope.array[i].value5 = response.data.value5;
                    scope.array[i].value8 = response.data.value8;
                    scope.array[i].value11 = response.data.value11;
                    scope.array[i].value12 = response.data.value12;
                    scope.array[i].value13 = response.data.value13;
                    scope.array[i].value18 = response.data.value18;
                    scope.array[i].value20 = response.data.value20;
                });
            }
})

在上面的代码中:-getArrayData API仅带来一些行的数据。对于其他行,我从getOtherDetails API中获取数据,该API从scope.array [i] .id中获取每条记录的值。

我在这里面临的问题是循环无法在我想要的流程中工作。它首先仅迭代for循环,然后循环内部API。因此,数据仅显示在一个记录中。

有什么方法可以使循环的流程与我编写代码的方式相同。还是有其他方法可以实现我在这里要做的事情。请提出任何解决方案。

作者: shreya gupta 的来源 发布者: 2017 年 9 月 15 日

回应 2


0

4309 作者的声誉

您可以使用async.mapSeries异步模块。这将一一执行您的项目,并在最终回调中发送您的响应。

我只是给你一个简单的例子,说明它如何与setTimeout函数一起工作。您将在最终回调中获得结果

async.mapSeries([1,2,3,4],function(item,cb){
setTimeout(function(){
console.log(item);
},1000)
cb();
},function(err,result){
console.log(result)
})
作者: abdulbarik 发布者: 2017 年 9 月 15 日

0

2128 作者的声誉

这里的问题与javascript关闭有关。由于回调是异步的,因此所有回调将获得相同的i值。

const test = (callback) => {
setTimeout(callback, 1000)
}

const count = 3

//wrong
for(var i = 0; i < count; i++){

test(() => {
  	console.log("i: " + i)
  })
}

//right es5 - using ugly self-invoking function
for(var j = 0; j < count; j++){
(function(j){
	test(() => {
  		console.log("j: " + j)
  })
})(j);
}

//right es6
for( let k = 0; k < count; k++){

test(() => {
  	console.log("k: " + k)
  })
}

模拟和测试您的方案。

angular.module("app", []).controller("testController", function($scope, $q) {
  $scope.array = []
  //simulate api
  $scope.getArrayData = () => {
    const deferred = $q.defer();
    deferred.resolve([{
      id: 1
    }, {
      id: 2
    }, {
      id: 3
    }, {
      id: 4
    }, {
      id: 5
    }])
    return deferred.promise
  }

  //simulate api
  $scope.getOtherDetails = (id) => {
    const deferred = $q.defer();
    deferred.resolve({
      data: {
        id: id,
        value1: id + 'value1',
        value2: id + 'value2',
        value3: id + 'value3',
        value4: id + 'value4',
        value5: id + 'value5'
      }
    })
    return deferred.promise
  }

  $scope.render = () => {
    $scope.getArrayData().then((response) => {
      $scope.array = response
      for (let i = 0; i < response.length; i++) {
        $scope.getOtherDetails(response[i].id).then(response => {
          $scope.array[i].value1 = response.data.value1
          $scope.array[i].value2 = response.data.value2
          $scope.array[i].value3 = response.data.value3
          $scope.array[i].value4 = response.data.value4
          $scope.array[i].value5 = response.data.value5
        })
      }
    })
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="testController">
    <button ng-click="render()" style="width:100px; height:30px;">render</button>
    <table cellpadding="0" cellspacing="0">
      <thead>
        <tr>
          <th>Row1</th>
          <th>Row2</th>
          <th>Row3</th>
          <th>Row4</th>
          <th>Row5</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="row in array track by $index">
          <td>{{row.value1}}</td>
          <td>{{row.value2}}</td>
          <td>{{row.value3}}</td>
          <td>{{row.value4}}</td>
          <td>{{row.value5}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

作者: spiritwalker 发布者: 2017 年 9 月 15 日
32x32