javascript - 两个不同的JSON源，不同时间更新；在 ng-Repeat 列表中使用结果

Question

我正在尝试从两个单独的 JSON 源创建状态列表。该列表将显示第一个来源的一般信息，并根据第二个来源的人数显示状态颜色。

第一个来源包含不会发生太大变化的一般数据(即提要名称、版本、描述)，并且可能每天仅调用两次。请参阅下面的代码示例:

/元数据

{
    data: [
        {
            "feedName": "Feed 1", 
            "version": "000001", 
            "location": "1234 Main Street, New York, New York" 
            "description": "This feed gives information on the number of people in Building A at a given time."
        }, 
        {
            "feedName": "Feed 2", 
            "version": "000001", 
            "location": "1000 Broad Street, New York, New York" 
            "description": "This feed gives information on the number of people in Building B at a given time."
        }, 
        {
            "feedName": "Feed 3", 
            "version": "000001", 
            "location": "1111 Governor Street, New York, New York" 
            "description": "This feed gives information on the number of people in Building C at a given time."
        }
    ]
} 

第二个来源包含每个提要中经常更改的数据。该源将被更频繁地调用；大约每小时。

/客户

{
    data: [
        {
            "metricName": "Feed 1", 
            "customerNumber": "10", 
            "time": "2012-10-03 15:30:00"

        }, 
        {
            "metricName": "Feed 2", 
            "customerNumber": "5", 
            "time": "2012-10-03 15:30:00"
        }, 
        {
            "metricName": "Feed 3", 
            "customerNumber": "15", 
            "time": "2012-10-03 15:30:00"
        }
    ]
} 

其中 metricName 和 feedName 实际上是相同的值。

我之前只处理过每个列表一个 JSON 源，我的 Javascript 看起来像这样:

$scope.metadataList = function(){
    $http.get('/metadata')
        .then(function(result) {
            $scope.metadata = result.data.data; 
        }); 
}

相应的 HTML 看起来像这样:

<ul ng-repeat = "data in metadata | orderBy: ['feedName']">
    <li> {{data.feedName}}, {{data.version}} </li>
</ul>

所以我的问题是，如何对每个数据源进行异步调用？如何将它们匹配以使用元数据信息和客户信息填充我的列表？

更新在有人问之前，我确实尝试了 ng-repeat = "data inmetadata.concat(customers)" 其中“customers”定义了第二个数据源(如 Ng-repeat datas from 2 json Angular 所示)，但这仅附加到列表的末尾......不完全是我想要的。

提前谢谢您。

Answer 1

首先，您可以从 $q 服务调用 all() 方法来解析多个 Promise，在这种情况下是两个请求。

// both promises calling your api to get the jsons
var promises = {
  metadataPromise: $http.get('/echo/json/', {}),
  customersPromise: $http.get('/echo/json/', {})
};

$q.all(promises).then(function(response) {
  metadata = response.metadataPromise;
  customers = response.customersPromise;

  joinMetadataAndCustomers();
}, function(response) {
  // in case any promise is rejected
});

之后，您使用 filter 检查每个 feedName 与其匹配的 metricName。最后，您可以使用 angular.merge 合并两者。

var joinMetadataAndCustomers = function() {
  metadata.data.forEach(function(mtd) {
    customers.data.filter(function(customer) {
      return customer.metricName === mtd.feedName;
    }).forEach(function(customer) {
      $ctrl.metadataAndCustomers.push(angular.merge({}, mtd, customer));
    });
  });
}

不确定这是否是最好的方法，但它确实有效。当然可以根据自己的需要进行改进。例如，如果您只有一个匹配项，则可以避免最后一个 forEach。

摆弄一个例子:https://jsfiddle.net/virgilioafonsojr/tv1ujet0/

希望对您有所帮助。