異なる2つのJSONソース、異なる時刻に更新。結果をng-Repeatリストに使用する

Question

2つの別々のJSONソースからステータスリストを作成しようとしています。リストには、最初のソースからの一般情報が表示され、2番目のソースの人数に基づいてステータスカラーが表示されます。

最初のソースには、あまり変更されない一般的なデータ（フィード名、バージョン、説明）が含まれており、1日に2回しか呼び出されない可能性があります。

/メタデータ

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

第2のソースは非常に頻繁に変化する各フィードにデータが含まれています。次のコード例を参照。このソースはより頻繁に呼び出されます。約1時間。 METRICNAMEとfeedNameは、実際には同じ値であり

/顧客

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

。

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

だから私の質問：次のようになります

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

し、対応するHTML：

は、私が唯一のJSONの私のJavascriptが次のようになります前に、リストごとの源、を扱ってきました各データソースに非同期呼び出しを行う方法は？メタデータ情報と顧客情報の両方をリストに入力するにはどうすればよいですか？

誰もが尋ねる前に、私はなかった、非常にどのような...私は、「顧客が」（Ng-repeat datas from 2 json Angularに示すように）第二のデータソースを定義ng-repeat = "data in metadata.concat(customers)"を試してみましたが、それが唯一のリストの最後に追加し 更新行く。

ありがとうございます。

Answer 1

$qサービスからall()メソッドを呼び出すと、複数の約束（この場合は2つの要求）を解決できます。

// 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を使用して、それに一致するすべてのfeedNamemetricNameを確認してください。最後に、両方を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)); 
    }); 
    }); 
} 

最良のアプローチであるかどうかはわかりませんが、機能します。もちろん、あなたのニーズに応じて改善することができます。たとえば、1つの一致が1つしかない場合、最後のforEachは避けることができます。例と

フィドル：私はそれが役に立てば幸いhttps://jsfiddle.net/virgilioafonsojr/tv1ujet0/

。