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

我正在尝试从两个单独的 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>

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

Update在有人问之前，我确实尝试过ng-repeat = "data in metadata.concat(customers)"其中“customers”定义了第二个数据源（如NG-重复来自 2 个 json Angular 的数据 https://stackoverflow.com/questions/41674695/ng-repeat-datas-from-2-json-angular?rq=1）但这仅附加到列表的末尾......不完全是我想要的。

先感谢您。

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

// 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
});

之后，您检查每个feedName the metricName使用它匹配filter。最后，您可以将两者合并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/ https://jsfiddle.net/virgilioafonsojr/tv1ujet0/

我希望它有帮助。