两个不同的JSON源，不同时间更新；在 ng-Repeat 列表中使用结果 [英] Two Different JSON sources, Update at Different Times; Use Result in ng-Repeat List

问题描述

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

I am trying to create a status list from two separate JSON sources. The list will display general info from the first source, and show a status color based on the number of people in the second source.

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

The first source contains general data that will not be changing much (i.e. feed name, version, description) and likely called only two times a day. See code example below:

/元数据

{
    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."
        }
    ]
} 

第二个来源包含每个提要的数据，这些数据会经常变化.此源将被更频繁地调用；大约每小时.

The second source contains data on each feed that will change very often. This source will be called more frequently; about every hour.

/customers

{
    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 实际上是相同的值.

Where metricName and feedName are actually the same values.

我之前只处理过每个列表的一个 JSON 源，其中我的 Javascript 如下所示:

I've only dealt with one JSON source per list before, where my Javascript would look like this:

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

和相应的 HTML 如下所示:

and corresponding HTML would look like this:

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

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

So my question is, how to I make async calls to each data source? How do I match them up to populate my list with both the metadata information and the customer information?

更新在有人问之前，我确实尝试过 ng-repeat = "data in metadata.concat(customers)" 其中customers"定义了第二个数据源，(如 来自 2 个 json Angular 的 Ng-repeat 数据) 但这只附加到清单......不是我想要的.

Update Before anyone asks, I did try ng-repeat = "data in metadata.concat(customers)" where "customers" defines the second data source, (as shown in Ng-repeat datas from 2 json Angular) but that only appends to the end of the list ... not quite what I was going for.

先谢谢你.

推荐答案

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

First, you can call the all() method from the $q service to resolve multiple promises, in that case the two requests.

// 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 合并.

After that, you check for every feedName the metricName which matches it using filter. In the end, you can merge both with 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.

Not sure if it's the best approach, but it works. Of course can be improved according to your needs. For example, if you only have one single match, the last forEach can be avoided.

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

希望能帮到你.

这篇关于两个不同的JSON源，不同时间更新；在 ng-Repeat 列表中使用结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！