Javascript 使用新的键和值AngularJS计算并附加JSON

我有一堆JSON数据，我想做一些计算，附加结果，在JSON中创建一个新的键。我已经设置了计算服务，然后在控制器中使用这些服务。但问题是，它只是将最后一个已知值推送到每个新创建的“rate”键中

JSON是这样的：

[{  "date"      : "2015-09-01",
"start"     : "2015-09-01 08:00:00",
"finish"    : "2015-09-01 10:00:00",
"loggedIn"  : "2015-09-01 08:06:27",
"loggedOut" : "2015-09-01 10:06:27"

}, { "date"      : "2015-09-02",
 "start"     : "2015-09-02 08:00:00",
 "finish"    : "2015-09-02 10:00:00",
 "loggedIn"  : "2015-09-02 08:02:05",
 "loggedOut" : "2015-09-02 10:02:11"

}, { "date"      : "2015-09-03",
 "start"     : "2015-09-03 13:00:00",
 "finish"    : "2015-09-03 14:30:00",
 "loggedIn"  : "2015-09-03 13:11:05",
 "loggedOut" : "2015-09-03 14:31:01"

}, { "date"      : "2015-09-04",
 "start"     : "2015-09-04 13:00:00",
 "finish"    : "2015-09-04 14:30:00",
 "loggedIn"  : "2015-09-04 13:01:05",
 "loggedOut" : "2015-09-04 14:31:01"

}, { "date"      : "2015-09-05",
 "start"     : "2015-09-05 18:00:00",
 "finish"    : "2015-09-05 21:00:00",
 "loggedIn"  : "2015-09-05 18:30:05",
 "loggedOut" : "2015-09-05 21:00:51"

}]

angular.module('MainController', [])
 .controller('mainCtrl', [
    '$http', 
    'CalculationService', 
    function($http, CalculationService){

         var logins = this;

         logins.dataStore = [];

         logins.add = function(temp){
             logins.dataStore.push(temp);
         };

         $http.get('./theData.json').success(function(data){
            logins.data = [];
            logins.data = data;
         });

         logins.getRate = function(start, end, login) {
            angular.forEach(logins.data, function(obj){
                obj.rate = {};
                obj.rate = CalculationService.getTheRate(start, end, login);
                return obj.rate;
            });
         };
}]);

服务内容如下：

angular.module('appService', [])
.service('CalculationService', function(){
    this.getTheRate = function(start, end, login) {
        if ( typeof (start) && typeof (end) && typeof (login) === 'undefined') {
            return 'n/a';
        } else {
            var startTime =  new Date(start).getTime() / 60000,
                endTime   =  new Date(end).getTime()   / 60000,
                loginTime =  new Date(login).getTime() / 60000;

            var totalTime  = endTime - startTime,
                lateness   = loginTime - startTime,
                percentile = 100 - (lateness / totalTime) * 100;

            return parseFloat(percentile).toFixed(1);
        }
    };

控制器如下所示：

[{  "date"      : "2015-09-01",
"start"     : "2015-09-01 08:00:00",
"finish"    : "2015-09-01 10:00:00",
"loggedIn"  : "2015-09-01 08:06:27",
"loggedOut" : "2015-09-01 10:06:27"

}, { "date"      : "2015-09-02",
 "start"     : "2015-09-02 08:00:00",
 "finish"    : "2015-09-02 10:00:00",
 "loggedIn"  : "2015-09-02 08:02:05",
 "loggedOut" : "2015-09-02 10:02:11"

}, { "date"      : "2015-09-03",
 "start"     : "2015-09-03 13:00:00",
 "finish"    : "2015-09-03 14:30:00",
 "loggedIn"  : "2015-09-03 13:11:05",
 "loggedOut" : "2015-09-03 14:31:01"

}, { "date"      : "2015-09-04",
 "start"     : "2015-09-04 13:00:00",
 "finish"    : "2015-09-04 14:30:00",
 "loggedIn"  : "2015-09-04 13:01:05",
 "loggedOut" : "2015-09-04 14:31:01"

}, { "date"      : "2015-09-05",
 "start"     : "2015-09-05 18:00:00",
 "finish"    : "2015-09-05 21:00:00",
 "loggedIn"  : "2015-09-05 18:30:05",
 "loggedOut" : "2015-09-05 21:00:51"

}]

angular.module('MainController', [])
 .controller('mainCtrl', [
    '$http', 
    'CalculationService', 
    function($http, CalculationService){

         var logins = this;

         logins.dataStore = [];

         logins.add = function(temp){
             logins.dataStore.push(temp);
         };

         $http.get('./theData.json').success(function(data){
            logins.data = [];
            logins.data = data;
         });

         logins.getRate = function(start, end, login) {
            angular.forEach(logins.data, function(obj){
                obj.rate = {};
                obj.rate = CalculationService.getTheRate(start, end, login);
                return obj.rate;
            });
         };
}]);

像这样的标记：

<div ng-controller="mainCtrl as main">
<section class="view-section">
            <div class="view" ng-repeat="item in main.data"> 
                {{ main.getRate(item.start, item.finish, item.loggedIn) }}
                {{ item.rate }}
            </div>
</section>
</div>

{{main.getRate（item.start、item.finish、item.loggedIn）}
{{item.rate}

---

{item.rate}在ngRepeat中输出很好，但是当我通过{main.data}检查数据时，为每个实例创建了键，但是没有正确插入值，因此所有“rate”键都被分配了相同的最后已知计算值，而不是每个实例的不同计算值。有什么想法吗？

您的

getRate

函数在循环中调用所有数据的计算（使用

angular.forEach

），但使用相同的

start

、

finish

和

login

值。然后在创建第二个循环的

ngRepeat

中调用此函数。因此，

ngRepeat

循环的每次迭代都会将当前项的速率分配给所有项。这就是为什么当你完成所有项目时，都会有最后一个项目的比率

相反，在获取数据之后（在

$http.get

回调中分配

logins.data

之后），而不是在{{…}表达式中调用控制器中的速率计算循环。正如注释所提到的，在表达式中调用具有副作用的函数不是一个好主意

---

还要注意，之所以会出现此错误，是因为

getRate

函数既将速率分配给对象（实际上，分配给所有对象），又返回该速率。这很混乱，而且容易出错。如果函数分配了速率或返回了速率，那么就更容易了，但不能同时返回两者。

不要调用一个在监视表达式中有副作用的函数

{…}

不管你的问题是什么，检查

typeof（start）&&typeof（finish）&&typeof（login）==“undefined”

可能不会达到你的目的。啊。。。谢谢你的澄清。我要试一试。