两种不同的JSON源，在不同的时间更新；在ng-重复列表中使用结果 [英] 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.

第一个来源包含的常规数据不会有太大变化(即Feed名称，版本，说明)，并且每天可能仅调用两次.请参见下面的代码示例:

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.

/客户

{
    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)"，其中客户"定义了第二个数据源(如

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-重复列表中使用结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！