使用Angular.js / JavaScript對兩個數組值進行排序並按日期合並

Question

我有兩個json數組，並且兩個數組都有date字段值。 在這里，我需要比較兩個數組並合並為一個數組。 我的代碼如下：

var firstArr=[{'name':'Ram','date':'2017-12-06'},{'name':'Raja','date':'2017-12-07'},{'name':'Rahul','date':'2017-12-08'}];

var secondArr=[{'model':'mmm','date':'2017-12-06'},{'model':'rrr','date':'2017-12-09'}];

在這里，我有兩個數組，我需要按日期比較兩個數組，並將兩個值合並到一個數組中。 預期輸出如下。

var finalArr=[{'name':'Ram','date':'2017-12-06','model':'mmm'},{'name':'Raja','date':'2017-12-07','model':''},{'name':'Rahul','date':'2017-12-08','model':''},{'name':'','date':'2017-12-09','model':'rrr'}]

我的預期輸出如上。 我正在嘗試如下。

angular.forEach(firstArr,function(obj1){
            angular.forEach(secondArr.task,function(obj2){
                if (new Date(obj1.date)=== new Date(obj2.date)) {

                }
            })
        })

但是像這樣，我對兩個數組的長度有點困惑，因為它可能/可能不相同。

Answer 1

我專注於JS部分，而不是角度版本。

邏輯

• 由於您需要基於日期字符串合並對象，因此可以創建一個以dateString作為屬性而將object作為值的hashMap。
• 然后，您可以使用Onject.assign合並對象。 如果不能，則甚至可以使用for..in循環或僅使用2個循環並手動設置特定屬性。
• 現在遍歷此hashMap並檢索分組的對象。

樣品：

 var firstArr=[{'name':'Ram','date':'2017-12-06'},{'name':'Raja','date':'2017-12-07'},{'name':'Rahul','date':'2017-12-08'}]; var secondArr=[{'model':'mmm','date':'2017-12-06'},{'model':'rrr','date':'2017-12-09'}]; var hashMap = {}; [firstArr, secondArr].forEach(function(arr) { arr.forEach(function(obj) { hashMap[obj.date] = Object.assign(Object.create(null), hashMap[obj.date] || {}, obj); }) }); var result = Object.keys(hashMap).map(x=> hashMap[x]); console.log(result) 

Answer 2

您可以使用array#reduce獲取具有相同日期的合並對象。 在array#reduce內部，合並具有相同日期的對象，然后使用Object.values()獲得所有值。

 var firstArr=[{'name':'Ram','date':'2017-12-06'},{'name':'Raja','date':'2017-12-07'},{'name':'Rahul','date':'2017-12-08'}], secondArr=[{'model':'mmm','date':'2017-12-06'},{'model':'rrr','date':'2017-12-09'}]; var result = firstArr.concat(secondArr).reduce((r, o) => { r[o.date] = Object.assign({}, r[o.date] || {name:'', model: ''}, o); return r; },{}); var output = Object.values(result); console.log(output); 

 .as-console-wrapper { max-height: 100% !important; top: 0; } 

Answer 3

嘗試這個

var finelArr = []
 angular.forEach(firstArr, function(val) {
     angular.forEach(secondArr, function(item) {
         if (val.date === item.date) {
             finelArr.push({ name: val.name, date: val.date, model: item.model })
         }
     })
 })

Answer 4

嘗試這個。 如果您不想修改原始陣列，則必須事先對其進行深度克隆。 與愛迪生的解決方案相反，這還將包括第二個數組中的項目。

 var firstArr=[{'name':'Ram','date':'2017-12-06'},{'name':'Raja','date':'2017-12-07'},{'name':'Rahul','date':'2017-12-08'}]; var secondArr=[{'model':'mmm','date':'2017-12-06'},{'model':'rrr','date':'2017-12-09'}]; const newArr = (arr1, arr2) => { const finalArr = arr1.map((firstElement) => { firstElement.model = ""; arr2.forEach((secondElement, index) => { if (secondElement.date === firstElement.date) { firstElement.model = secondElement.model; arr2.splice(index, 1); } }); return firstElement; }); arr2.forEach((element) => { element.name = ""; finalArr.push(element); }); return finalArr; }; console.log(newArr(firstArr, secondArr)); 

Answer 5

Angular是具有大型庫的龐大框架，但在開始在視圖中使用正確的語法之前只需要它。

該示例無需在控制器中進行編碼即可工作：

 var app = angular.module("app", []); app.controller("ctrlA", function($scope) { var firstArr = [{ 'name': 'Ram', 'date': '2017-12-06' }, { 'name': 'Raja', 'date': '2017-12-07' }, { 'name': 'Rahul', 'date': '2017-12-08' }]; var secondArr = [{ 'model': 'mmm', 'date': '2017-12-06' }, { 'model': 'rrr', 'date': '2017-12-09' }]; $scope.ul = firstArr.concat(secondArr); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="ctrlA"> <ul> <li ng-repeat="li in ul | orderBy:'date'"> {{li.name ? li.name : li.model}} - {{li.date}} </li> </ul> </div>