Using ng-repeat with a collection of arrays in AngularJS

Question

I have an object that looks like this:

Object {391:Array[1], 396: Array[2]}
   391: 
      Array[1]
        0: 
         arrival: "17.43.49"
         car: "391"
         date: "11/11/2014"
         duration: "00:00:06"
         time: "17.43.43"

    396: 
      Array[2]
        0: 
         arrival: "17.20.48"
         car: "396"
         date: "11/11/2014"
         duration: "00:00:11"
         time: "17.20.37"
        1:
         arrival: "17.21.27"
         car: "396"
         date: "11/11/2014"
         duration: "00:00:17"
         time: "17.21.10"

It is constructed by the following function:

var carsDict = {};

angular.forEach($scope.recordlist, function(record) {
  carsDict[record.car] = carsDict[record.car] || [];
  carsDict[record.car].push(record);
});

$scope.carstats = carsDict;

Is there any way using AngularJS that I can add an substract properties from every object in the array?

For instance, in the example above every object is a trip (391 has one trip, 396 has two trips) from a particular car. Right now I'm listing the car code and the number of trips using an ng-repeat like this:

<div class="row" ng-repeat="carcode in carstats">          
   <div class="col-md-4">{{carcode[0].car}}</div>
   <div class="col-md-4">{{carcode.length}}</div>
</div>

What I'm trying to do is to figure out the total duration time for each car, so I need to be able to add together all the duration properties from every object in every array.

In the example above, every array has to end up having a property totalduration that is the sum of all the duration properties in all the objects of the array. for exampl, the second array should have a 396.totalduration = (duration: "00:00:11") + (duration: "00:00:17")

Any tips?

developer.mozilla.org/en/docs/Web/JavaScript/Reference/… ? — Joseph
– Joseph, Commented Nov 11, 2014 at 15:32
@Joseph yes, looks like it, but I wouldn't know how to implement it, I think :S — Eric Mitjans
– Eric Mitjans, Commented Nov 11, 2014 at 15:40
do the calculations in controller when you receive or change the data — charlietfl
– charlietfl, Commented Nov 11, 2014 at 15:41

James Gentes · Accepted Answer · 2014-11-11 22:40:15Z

1

I'd suggest doing the sum calculation within the controller:

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {

var carsDict = { 
    391: [
        {
         arrival: "17.43.49",
         car: "391",
         date: "11/11/2014",
         duration: "00:00:06",
         time: "17.43.43"
        }
    ],

    396: {
        0: {
         arrival: "17.20.48",
         car: "396",
         date: "11/11/2014",
         duration: "00:00:11",
         time: "17.20.37",
        },        
        1: {
         arrival: "17.21.27",
         car: "396",
         date: "11/11/2014",
         duration: "00:00:17",
         time: "17.21.10"
        }
    }
};

for (record in carsDict) {     
    var totalduration = '';

    for (item in carsDict[record]) {
        // get totalduration figured out..
        totalduration += carsDict[record][item].duration; // need to account for sum using time format here
    }

    for (item in carsDict[record]) {
        // now add totalduration to each record        
        carsDict[record][item]['totalduration'] = totalduration; 
        // to add a new value to the individual item        
        carsDict[record][item]['newvalue'] = 'anything you want';
        // to remove a value (I prefer changing to undefined)
        carsDict[record][item].arrival = undefined;
    }
};

    $scope.test = carsDict;

}

edited Nov 11, 2014 at 22:40

answered Nov 11, 2014 at 17:06

James Gentes

8,22610 gold badges48 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Eric Mitjans Over a year ago

James, I tried it but it didn't work. The problem is that in the example above, every array has to end up having a property totalduration that is the sum of all the duration properties in all the objects of the array. In the example above, the second array should have a totalduration = (duration: "00:00:11") + (duration: "00:00:17")

James Gentes Over a year ago

Ok, I see what you're saying now. I think you'll need to iterate through the array twice to get the total duration into each one - first to calculate it, then to add it. I've created a jsfiddle: jsfiddle.net/ggf9xakf

Eric Mitjans Over a year ago

Brilliant! The only issue is that the momentjs objects don't seem to get added correctly, even with the proper formating. Care to take a look? jsfiddle

Collectives™ on Stack Overflow

Using ng-repeat with a collection of arrays in AngularJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related