如何处理异步获取的数据？

Question

我是 AngularJS 的新手，正在努力解决如何在页面上显示之前处理从服务器异步获取的数据。

我抓取的数据是这样的：

"all_colors":[
      {"color":"red","quantity":1},
      {"color":"green","quantity":11},
      {"color":"yellow","quantity":5}
]

最初加载页面时，我像这样从服务器获取上述数据：

angular.module('angularDjangoRegistrationAuthApp')
.controller('DashbordCtrl', function ($scope, djangoAuth, Validate, $location) {
  djangoAuth.fetch_from_server().then(function(data){
    $scope.model = data;
  });

我想在页面上显示两件事：

Available Colors: 3
Total Color Quantity: 17

我可以这样显示可用的颜色：

Available Colors: {{model.all_colors.length}}

问题

但是我如何循环 all_colors 并计算每个的数量以便我可以显示 Total Color Quantity？

我似乎无法在获取数据后在我的 JS 文件中执行此操作，因为它是异步获取的。我想不出这样做的方法。

Answer 1

无论您如何获取数据，只需考虑您需要显示哪些数据 - 您的 ViewModel - 并在您获取数据时为它们赋值。

在这种情况下，创建一个 scope-exposed 属性 $scope.totalColorQty，并在收到数据时为其赋值：

djangoAuth.fetch_from_server().then(function(data){
    $scope.model = data;
    $scope.totalColorQty = computeColorQuantity(data.all_colors);
});

function computeColorQuantity(colorsArray){
  // do whatever you need to calculate the quantity
}

然后，简单地显示在UI:

<div>Total Color Quantity: 
   <span ng-show="totalColorQty === undefined">Loading...</span>
   <span ng-hide="totalColorQty === undefined">{{totalColorQty}}</span>
</div>

一些补充说明：

1) 您可以在作用域上公开 computeColorQuantity 并绑定到它。但是，我强烈建议不要这样做 - 因为此操作是 "heavy" 并且将在每个摘要周期执行，使您的整个应用程序变慢。

不要这样做：

<div> Total Color Quantity: {{computeColorQuantity(model.all_colors)}}</div>

2) 如果你不需要重新计算这个值，那么你可以绑定一次以减少 $watchers 的数量：

<span ng-show="totalColorQty">{{::totalColorQty}}</span>

3) 如果您打算允许用户更新数据，那么我建议在每次用户发起的更改时重新计算它，例如，通过 ng-change，而不是通过 deep $watch

如何处理异步获取的数据？

How to process asynchronously fetched data?

javascript

asynchronous

angularjs

angularjs-scope