CODEWITHSUNDEEP
javascriptarraysangularjssumangularjs-ng-repeat
LLong
LLong

Reputation: 157

Get sum of Object key values in ngRepeat

I'm trying to get the sum of the 'amount' key for all the objects in an ngRepeat loop. I'll need to also filter that sum based on another key which represents the person who spent that amount, 'name'.

So for example I would like to get separate values for the total amount of money spent by Mary and Lewis. I'm relatively new to Angular on not sure the proper way to accomplish this. Any help would be greatly appreciated.

HTML

<!-- Mary's Items -->
    <div class="col-md-4">
    <h1>Mary</h1>
  <div class="well" ng-repeat="post in posts | filter: {name: 'Mary' } | orderBy: 'created_at':true">
    <!-- exit a message -->

    <h4>{{post.title}}</h4>
    <h3>${{post.amount}}</h3>
    <p>{{post.details}}</p>
        <!-- delete message -->

  <p><a href="javascript:void(0);" class="pull-right glyphicon glyphicon-trash"  ng-click="messages.$remove(post)"></a></p>
  </div>
  </div>


  <!-- Lewis' Items -->
  <div class="col-md-4 col-md-offset-1">
  <h1>Lewis</h1>
  <div class="well" ng-repeat="post in posts | filter: {name: 'Lewis' } | orderBy: 'created_at':true">
    <!-- exit a message -->

    <h4>{{post.title}}</h4>
    <h3>${{post.amount}}</h3>
    <p>{{post.details}}</p>
    <p>{{post.created_at}}</p>
      <!-- delete message -->
  <p>
  <a href="#/edit/{{posts.indexOf(post)}}">edit</a>

  <a href="javascript:void(0);" class="pull-right glyphicon glyphicon-trash"  ng-click="removePost(post)" ng-confirm-click="Are you sure you want to remove this item?"></a>
  </p>
  </div>

JavaScript

spendingApp.controller("SpendingController", function($scope, $firebase,$stateParams) {


  //Setup Firebase DB and make available to app
  var ref = new Firebase("**Firebase URL**");
  var sync = $firebase(ref);
  $scope.posts = sync.$asArray();
  $scope.whichItem = $stateParams.itemId;
  console.log($stateParams);

  $scope.itemTitle = $scope.whichItem;

  // Add new Item to DB
  $scope.addPost = function() {
    $scope.posts.$add({
      name: $scope.itemName, 
      title: $scope.itemTitle, 
      details: $scope.itemDetails, 
      amount: parseFloat($scope.itemAmount),
      created_at:  Date()
    });
    // Clears values;
    $scope.itemName = "";
    $scope.itemAmount = "";
    $scope.itemTitle = "";
    $scope.itemDetails = "";
  }





});

JSON Examples

{
  "amount" : 16.04,
  "created_at" : "2014-08-17T17:40:18.846Z",
  "details" : "upgrade",
  "id" : 36,
  "name" : "Lewis",
  "title" : "Street Fighter Ultra",
  "updated_at" : "2014-08-17T17:40:18.846Z"
}, {
  "amount" : 19,
  "created_at" : "2014-08-17T17:41:08.341Z",
  "details" : "",
  "id" : 37,
  "name" : "Lewis",
  "title" : "Webfaction Web Hosting",
  "updated_at" : "2014-08-17T17:41:08.341Z"
}

Upvotes: 1

Views: 584

Answers (2)

a8m
a8m

Reputation: 9474

Try to work with sumFilter of angular-filter module.
for example:
JS:

$scope.users = [
  { id: 1, name: 'Ariel', amount: 16.54 },
  { id: 2, name: 'Dan',   amount: 13.74 },
  { id: 3, name: 'Ron',   amount: 43.90 },
  { id: 4, name: 'Greg',  amount: 71.09 },
  { id: 5, name: 'Alex',  amount: 84.99 },
];

HTML:

<p>{{ users | map: 'amount' | sum }}</p>
<!--Result: 230.26 -->

Upvotes: 1

LLong
LLong

Reputation: 157

I managed to figure out a solution, although I don't think it's the most elegant way of doing it but hopefully someone can build on top of what I've come up with. Please if someone can tell me how I can get the subtraction of getTotal() from 3200 into the controller instead of the view I would be very grateful.

JS

  // Calculate Total Amount Spent
  $scope.getTotal = function(user){
    var total = 0;
    for(var i = 0; i < $scope.posts.length; i++){
        var post = $scope.posts[i];
        if (post.name === user) {
          total += post.amount;
        }
    }
    return Math.round(total * 100) / 100;
}

HTML

<h4>Remaining Balance ${{ 3200 - getTotal("Lewis") }}</h4>

Upvotes: 0

Related Questions