Question

我有以下代码从HTTP服务中提取数据并将JSON数据绑定到HTML，

此功能放置时带有2秒计时器，以便在后端发生变化时自动拉出。

     function sampleDevices() {
    var devicesArray = [];

    for(id in devices) {
      var device = devices[id];

      var pollingApiUrl = "DBService.asmx/HelloWorld";

        $http({ method: 'GET', url: pollingApiUrl, params: { id: id } })
      .then(function (response) { // Success


              device.status= response.data.JsonStatus;
              device.comp = response.data.CompanyName;
              device.loc = response.data.ReceiverLocation});
    }
    $scope.devices = devicesArray;  }
<tr ng-repeat="device in devices |orderBy: '-event.rssi' limitTo: 3">
<td> {{device.comp}} </td>
<td> {{device.loc}} </td>
<td> {{device.test }} </td>
</tr>

我遇到了响应数据的问题，只有最后的JSON成功数据总是得到更新。例如，输出像

A IN OK - 第一次获取值并且不会更改
B OUT OK - 在后端更新时更新更改

无法获得正确的响应并将相应的值绑定到列表中。如何解决此问题，从JSON获取值并使用2或3秒计时器将正确值更新为HTML标记

Answer 1

     function sampleDevices() {
    var devicesArray = [];
    var i=0;
    for(i=0; i < devices.length; i++) {
    var device = {};

      var pollingApiUrl = "DBService.asmx/HelloWorld";

        $http({ method: 'GET', url: pollingApiUrl, params: { id: devices[i].id } })
      .then(function (response) { // Success

              device.status= response.data.JsonStatus;
              device.comp = response.data.CompanyName;
              device.loc = response.data.ReceiverLocation;
                  devicesArray.push(device);
    });

    }
    $scope.devices = devicesArray;  }
<tr ng-repeat="device in devices |orderBy: '-event.rssi' limitTo: 3">
<td> {{device.comp}} </td>
<td> {{device.loc}} </td>
<td> {{device.test }} </td>
</tr>

Answer 2

您正在for循环中多次执行http请求。

for循环不等待，它会快速连续触发所有请求。为了让事情等待查看异步库和每个函数https://caolan.github.io/async/docs.html#each

在异步的成功返现中，您将设置范围。

或者......更改后端，这样您只需要进行一次API调用，这样会更好。

AngularJs $ HTTP循环计数器不会更新

2 个答案: