calculating json data in angularjs

Question

I'm learning through angularjs (not 2) and am trying to figure out how to calculate a customer order total.

my data looks like this:

var customers = [
            {
                id: 1, 
                joined: '2000-12-02', 
                name:'John', 
                city:'Chandler', 
                orders: [
                    {
                        id: 1,
                        product: 'Shoes',
                        total: 9.9956
                    }
                ]
            }, 
            {
                id: 2, 
                joined: '1965-01-25',
                name:'Zed', 
                city:'Las Vegas', 
                orders: [
                    {
                        id: 2,
                        product: 'Baseball',
                        total: 9.995
                    },
                    {
                        id: 3,
                        product: 'Bat',
                        total: 9.995
                    }
                ]
            }
]

I have a factory and a controller that receives that data and...

my controller looks like:

(function() {

    var CustomersController = function ($scope, $log, customerFactory) {
        $scope.sortBy = 'name';
        $scope.reverse = false;
        $scope.customers = [];

        function init () {

            customerFactory.getCustomers()
                .success(function(customers) {
                    $scope.customers = customers;

            })
            .error(function(data, status, headers, config){
                $log.log(data.error + ' ' + status );

            });

        }

        init();

        $scope.doSort = function(propName) {
           $scope.sortBy = propName;
           $scope.reverse = !$scope.reverse;
        };


    };

    CustomersController.$inject = ['$scope','$log' ,'customerFactory'];

    angular.module('customersApp')
      .controller('CustomersController', CustomersController);

}());

my view looks like this:

<h2>Customers</h2>
Filter: <input type="text" ng-model="customerFilter.name" />
<br /><br />
<table>
    <tr>
        <th ng-click="doSort(name)">Name</th>
        <th ng-click="doSort(city)">City</th>
        <th ng-click="doSort(joined)">Joined</th>
        <th>&nbsp;</th>
    </tr>
    <tr ng-repeat="cust in customers | filter:customerFilter | orderBy:sortBy:reverse">
        <td>{{ cust.name }}</td>
        <td>{{ cust.city }}</td>
        <td><a href="#/orders/{{ cust.employeeid }}">View Orders</a></td>
    </tr>
</table>
<br />
<span>Total customers: {{ customers.length }} </span>

I understand how I would add in an order total column...but how do you calculate it given the json that comes back?

---------------EDIT--------------

I think this is headed in the right path?

    customerFactory.getCustomers()
        .success(function(customers) {
            for(var i = 0; i < customers.length; i++) {
                var currCustomer = customers[i];
                var aCustomerTotal = 0;

                if (currCustomer.hrs) {

                    for (var j = 0; j < currCustomer.hrs.length; j++) {
                        aCustomerTotal += parseInt(currCustomer.hrs[j].bllhrs);
                    }
                } else {
                    aCustomerTotal=0
                }
                customers[i].orderTotal = aCustomerTotal;
                console.log(currCustomer.lastname + " total: " + aCustomerTotal);
            }
            // after the exeuction of this logic set your $scope's customer to the modified object.
            $scope.customers = customers;
        })

Answer 1

You can create custom filter for that (let's say you also use lodash for simplification):

angular.module('customersApp', [])
.filter('customerTotal', function() {
  return function(customer) {
    return _.reduce(customer.hrs, function(sum, hrs) {
      return sum + parseInt(hrs.bllhrs);
    }, 0);
  };
});

And you can use that filter like that:

<td>{{ curr.name }} total: {{ cust | customerTotal }}</td>

Answer 2

If all you are stuck on is getting a total per customer -> you can use a simple double for loop:

.success(function(customers) {
    for(var i = 0; i < customers.length; i++) {
        var currCustomer = customers[i];
        var aCustomerTotal = 0;
        for (var j = 0; j < currCustomer.orders.length; j++) {
            aCustomerTotal += currCustomer.orders[j].total;
        }
        customers[i].orderTotal = aCustomerTotal;
        console.log(currCustomer.name + " total: " + aCustomerTotal);
    }
    // after the exeuction of this logic set your $scope's customer to the modified object.
    $scope.customers = customers;
}