user2061886 user2061886 - 1 month ago 10
AngularJS Question

calculating json data in angularjs

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

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