groupby和sum in service angular 2/4

Question

我在實現某些功能時遇到了一些困難。我希望你們能幫助我解決這個問題。我們的API的結果看起來像（不是所有的字段中顯示）：

[{ 
    "code": "CU03241", 
    "naam": "Test1", 
    "resultaatnumeriek": 59, 
    "resultaat": "5.9", 
    "ec": 7.5, 
    "virtualec": 5, 
    "sbu": 210, 
    "kleur": "black", 
    "isvastgesteld": true, 
    "vastgesteldop": "2011-03-14T00:00:00", 
    "fase_id": "P", 
    "fase_naam": "Propedeuse" 

}, { 
    "code": "CU03242", 
    "naam": "Test2", 
    "resultaatnumeriek": 59, 
    "resultaat": "5.9", 
    "ec": 7.5, 
    "virtualec": 2, 
    "sbu": 210, 
    "kleur": "black", 
    "isvastgesteld": true, 
    "vastgesteldop": "2011-03-14T00:00:00", 
    "fase_id": "P", 
    "fase_naam": "Propedeuse" 

}, { 
    "code": "CU03243", 
    "naam": "Test3", 
    "resultaatnumeriek": 59, 
    "resultaat": "5.9", 
    "ec": 7.5, 
    "virtualec": 10, 
    "sbu": 210, 
    "kleur": "black", 
    "isvastgesteld": true, 
    "vastgesteldop": "2011-03-14T00:00:00", 
    "fase_id": "P", 
    "fase_naam": "Propedeuse" 

}, { 

    "code": "CU03244", 
    "naam": "Test4", 
    "resultaatnumeriek": 59, 
    "resultaat": "5.9", 
    "ec": 7.5, 
    "virtualec": 0, 
    "sbu": 210, 
    "kleur": "black", 
    "isvastgesteld": true, 
    "vastgesteldop": "2011-03-14T00:00:00", 
    "fase_id": "P", 
    "fase_naam": "Hoofdfase" 

}, { 

    "code": "CU03245", 
    "naam": "Test7", 
    "resultaatnumeriek": 59, 
    "resultaat": "5.9", 
    "ec": 7.5, 
    "virtualec": 4, 
    "sbu": 210, 
    "kleur": "black", 
    "isvastgesteld": true, 
    "vastgesteldop": "2011-03-14T00:00:00", 
    "fase_id": "H", 
    "fase_naam": "Hoofdfase" 
}] 

這個結果，我需要改變以下所有在我服務的角度。所以我需要做一個groupby和一些總和。 （grouby上fase_id和virtualec和歐盟的總和。一個例子，我怎麼想的那樣。

[{ 
    "fase_id": "P", 
    "fase_naam": "Propedeuse", 
    "sumEc": 22.5, 
    "sumvirtualec": 17, 
    "Eindresultaten": [{ 
     "code": "CU03241", 
     "naam": "Test1", 
     "resultaatnumeriek": 59, 
     "resultaat": "5.9", 
     "ec": 7.5, 
     "virtualec": 5, 
     "sbu": 210, 
     "kleur": "black", 
     "isvastgesteld": true, 
     "vastgesteldop": "2011-03-14T00:00:00" 
    }, { 
     "code": "CU03242", 
     "naam": "Test2", 
     "resultaatnumeriek": 59, 
     "resultaat": "5.9", 
     "ec": 7.5, 
     "virtualec": 2, 
     "sbu": 210, 
     "kleur": "black", 
     "isvastgesteld": true, 
     "vastgesteldop": "2011-03-14T00:00:00" 
    }, { 
     "code": "CU03243", 
     "naam": "Test3", 
     "resultaatnumeriek": 59, 
     "resultaat": "5.9", 
     "ec": 7.5, 
     "virtualec": 10, 
     "sbu": 210, 
     "kleur": "black", 
     "isvastgesteld": true, 
     "vastgesteldop": "2011-03-14T00:00:00" 
    }] 
}, { 
    "fase_id": "H", 
    "fase_naam": "Hoofdfase", 
    "sumEc": 22.5, 
    "sumvirtualec": 4, 
    "Eindresultaten": [{ 
     "code": "CU03244", 
     "naam": "Test4", 
     "resultaatnumeriek": 59, 
     "resultaat": "5.9", 
     "ec": 7.5, 
     "virtualec": 0, 
     "sbu": 210, 
     "kleur": "black", 
     "isvastgesteld": true, 
     "vastgesteldop": "2011-03-14T00:00:00" 
    }, { 

     "code": "CU03245", 
     "naam": "Test7", 
     "resultaatnumeriek": 59, 
     "resultaat": "5.9", 
     "ec": 7.5, 
     "virtualec": 4, 
     "sbu": 210, 
     "kleur": "black", 
     "isvastgesteld": true, 
     "vastgesteldop": "2011-03-14T00:00:00" 
    }] 
}] 

我以爲我可以用RxJS什麼做到這一點，但我無法弄清楚究竟是如何。

Answer 1

我建議用做自定義過濾器，這可能會幫助你。

angular.module('app',[]) 
 
    .controller('MainController', function($scope,$filter) { 
 
    $scope.data =[ 
 
    { 
 
    "code": "CU03241", 
 
    "naam": "Test1", 
 
    "resultaatnumeriek": 59, 
 
    "resultaat": "5.9", 
 
    "ec": 7.5, 
 
    "virtualec": 5, 
 
    "sbu": 210, 
 
    "kleur": "black", 
 
    "isvastgesteld": true, 
 
    "vastgesteldop": "2011-03-14T00:00:00", 
 
    "fase_id": "P", 
 
    "fase_naam": "Propedeuse" 
 

 
}, { 
 
    "code": "CU03242", 
 
    "naam": "Test2", 
 
    "resultaatnumeriek": 59, 
 
    "resultaat": "5.9", 
 
    "ec": 7.5, 
 
    "virtualec": 2, 
 
    "sbu": 210, 
 
    "kleur": "black", 
 
    "isvastgesteld": true, 
 
    "vastgesteldop": "2011-03-14T00:00:00", 
 
    "fase_id": "P", 
 
    "fase_naam": "Propedeuse" 
 

 
}, { 
 
    "code": "CU03243", 
 
    "naam": "Test3", 
 
    "resultaatnumeriek": 59, 
 
    "resultaat": "5.9", 
 
    "ec": 7.5, 
 
    "virtualec": 10, 
 
    "sbu": 210, 
 
    "kleur": "black", 
 
    "isvastgesteld": true, 
 
    "vastgesteldop": "2011-03-14T00:00:00", 
 
    "fase_id": "P", 
 
    "fase_naam": "Propedeuse" 
 

 
}, { 
 

 
    "code": "CU03244", 
 
    "naam": "Test4", 
 
    "resultaatnumeriek": 59, 
 
    "resultaat": "5.9", 
 
    "ec": 7.5, 
 
    "virtualec": 0, 
 
    "sbu": 210, 
 
    "kleur": "black", 
 
    "isvastgesteld": true, 
 
    "vastgesteldop": "2011-03-14T00:00:00", 
 
    "fase_id": "P", 
 
    "fase_naam": "Hoofdfase" 
 

 
}, { 
 

 
    "code": "CU03245", 
 
    "naam": "Test7", 
 
    "resultaatnumeriek": 59, 
 
    "resultaat": "5.9", 
 
    "ec": 7.5, 
 
    "virtualec": 4, 
 
    "sbu": 210, 
 
    "kleur": "black", 
 
    "isvastgesteld": true, 
 
    "vastgesteldop": "2011-03-14T00:00:00", 
 
    "fase_id": "H", 
 
    "fase_naam": "Hoofdfase" 
 
} 
 
]; 
 

 
$scope.mani = $filter('groupBy')($scope.data, 'fase_id'); 
 

 
$scope.H = {"fase_id": "H", 
 
    "fase_naam": "Propedeuse", 
 
    "sumEc": 22.5, 
 
    "sumvirtualec": 17,"Eindresultaten":[]}; 
 
    $scope.P = {"fase_id": "P", 
 
    "fase_naam": "Propedeuse", 
 
    "sumEc": 22.5, 
 
    "sumvirtualec": 17,"Eindresultaten":[]}; 
 
    
 

 
angular.forEach($scope.mani, function(value, key){ 
 
if(key == 'H'){ 
 
$scope.sum1 = $filter('sum')(value, 'virtualec'); 
 
$scope.sum2 = $filter('sum')(value, 'ec'); 
 
$scope.H.sumEc = $scope.sum1; 
 
$scope.H.sumvirtualec = $scope.sum2; 
 
$scope.H.Eindresultaten=$scope.mani.H; 
 
}else{ 
 
$scope.sum11 = $filter('sum')(value, 'virtualec'); 
 
$scope.sum12 = $filter('sum')(value, 'ec'); 
 
$scope.P.sumEc = $scope.sum11; 
 
$scope.P.sumvirtualec = $scope.sum12; 
 
$scope.P.Eindresultaten=$scope.mani.P; 
 
} 
 
}); 
 
}) 
 
.filter('groupBy', function() { 
 
    var results={}; 
 
    return function (data, key) { 
 
     if (!(data && key)) return; 
 
     var result; 
 
     if(!this.$id){ 
 
      result={}; 
 
     }else{ 
 
      var scopeId = this.$id; 
 
      if(!results[scopeId]){ 
 
       results[scopeId]={}; 
 
       this.$on("$destroy", function() { 
 
        delete results[scopeId]; 
 
       }); 
 
      } 
 
      result = results[scopeId]; 
 
     } 
 

 
     for(var groupKey in result) 
 
      result[groupKey].splice(0,result[groupKey].length); 
 

 
     for (var i=0; i<data.length; i++) { 
 
      if (!result[data[i][key]]) 
 
       result[data[i][key]]=[]; 
 
      result[data[i][key]].push(data[i]); 
 
     } 
 

 
     var keys = Object.keys(result); 
 
     for(var k=0; k<keys.length; k++){ 
 
      if(result[keys[k]].length===0) 
 
      delete result[keys[k]]; 
 
     } 
 
     return result; 
 
    }; 
 
}).filter('sum', function() { 
 
    return function(data, key) { 
 
     if (angular.isUndefined(data) || angular.isUndefined(key)) 
 
     return 0; 
 
     var sum = 0;  
 
     angular.forEach(data, function(v, k) { 
 
     sum = sum + parseInt(v[key]); 
 
     }); 
 
     return sum; 
 
    } 
 

 
})

<!DOCTYPE html> 
 
<html ng-app="app"> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
    
 
    
 
    <meta charset="utf-8"> 
 
    <title></title> 
 
</head> 
 
<body> 
 
    <div ng-controller="MainController"><p style="color:#3f51b5">{{mani}}</p> 
 
<ul ng-repeat="val in mani" style="color:#609008"><br> {{val}} 
 
    <li ng-repeat="v in val"> 
 
    code:{{ v.code }} 
 
    </li> 
 
    sum of EC: {{ val | sum:'ec' }}<br> sum of Virtual EC:{{val |sum:'virtualec' }} 
 
</ul> 
 

 
<div style="color:#010101">Did in controller:- <br> 
 

 
sum of EC: {{sum1}} sum of Virtual EC: {{sum2}} <br> sum of EC: {{sum11}} sum of Virtual EC: {{sum12}} 
 
<br> 
 
<br> 
 
{{P}} <br><br>{{H}} 
 
    </div> 
 
    </div> 
 
</body>