javascript - Calculate and append JSON with new key and value AngularJS -

so i've bunch of json data , wanna calculations , append results , create new key in json. i've setup calculation services use in controller. issue is, is pushing in last known value each newly created 'rate' key.

the json this:

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

the service follows:

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);         }     }; 

the controller this:

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;             });          }; }]); 

markup :

<div ng-controller="mainctrl 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> 

{{ item.rate }} outputs fine within ngrepeat when checked data via {{ main.data }} key created each instance value not inserted whereby 'rate' keys assigned same last known calculated value instead of distinct calculated values each instance. ideas?

your getrate function invokes calculation in loop on data (using angular.foreach), using same start, finish , login values. call function inside ngrepeat creates second loop. every iteration of ngrepeat loop assigns rate of current item items. why time you're done items have rate of last item.

instead, invoke rate calculation loop in controller, right after getting data (literally right after assigning logins.data in $http.get callback), , not in {{…}} expression. comments mention, it's not idea invoke function side effects inside expression.

also note error made possible because getrate function both assigns rate object (actually, objects) , returns it. that's confusing , error-prone. easier if function either assigned rate or returned it, not both.