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

我是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;
  });

最初加载页面时，我从服务器获取上述数据，如下所示：

"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}}

问题

但是如何循环所有颜色并计算每个颜色的数量，以便显示

总颜色数量

---

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

无论您如何获取数据，只要考虑需要显示哪些数据—您的ViewModel—并在获取数据时为其赋值即可

在这种情况下，创建一个作用域公开属性

$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>

2） 如果不需要重新计算此值，则可以绑定一次以减少$watcher的数量：

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

{{：：totalColorQty}

---

3） 如果您确实打算允许用户更新数据，那么我建议在每次用户发起更改时重新计算数据，例如，通过

ng change

，而不是通过deep$watch

，

fetch_from_server（）

返回承诺吗？您使用的是

$q

？@GeorgeStocker

从服务器（）获取\u（）

与此文件完全相似，您需要循环使用数量值。angular.foreach将对此有所帮助。将它们添加到一个数组中，并返回大量的ArrayTanks以供您的建议。现在，我将使用您建议的

computeColorQuantity

方法。虽然我不会这么做，但我不明白这是什么意思，因为这是我和安格拉斯的第二天。我确实希望这些数据会随着用户的请求而不断变化。（3） 仅当您打算在表单中显示数据并让用户在页面上编辑数据时适用。如果数据仅通过异步获取进行更改，那么每次获取数据时重新计算

totalColorQty

就足够了。