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

我试图从两个独立的JSON源创建一个状态列表。该列表将显示第一个来源的常规信息，并根据第二个来源的人数显示状态颜色

第一个源包含的一般数据不会有太大变化（即提要名称、版本、描述），可能一天只调用两次。请参见下面的代码示例：

/metadata

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

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

相应的HTML如下所示：

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

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

{{data.feedName}，{{data.version}

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

更新 在任何人询问之前，我尝试了

ng repeat=“data in metadata.concat（customers）”

，其中“customers”定义了第二个数据源（如中所示），但这只会附加到列表的末尾。。。不完全是我想要的

---

先谢谢你

首先，您可以从

$q

服务调用

all（）

方法来解析多个承诺，在这种情况下是两个请求

// 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
的
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

摆弄一个例子：

我希望它能有所帮助。
首先，您可以从
$q
服务调用
all（）
方法来解析多个承诺，在这种情况下，这两个请求

// 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
的
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

摆弄一个例子：

希望能有所帮助。
感谢您提供此解决方案！很容易理解！这肯定让我走上了正确的道路。快速更新供阅读的人使用——根据我的JSON源代码的编写方式，我必须用以下方式定义源代码：$q.all（承诺）。然后（函数（响应）{metadata=response.metadataPromise.data；customers=response.customersPromise.data；…因此合并可以识别单个条目。感谢您提供此解决方案！非常容易理解！这确实让我走上了正确的轨道。对于任何阅读的人，快速更新--根据我编写JSON源的方式，我必须定义源以下面的方式：$q.all（promises）.then（function（response）{metadata=response.metadataPromise.data；customers=response.customersPromise.data；…以便合并可以识别各个条目。