Calculating sum of repeated elements in AngularJS ng-repeat

Question

The script below displays a shop cart using ng-repeat  For each element in the array  it shows the item name  its amount and the subtotal  product price   product quantity    What is the simplest way for calculating the total price of repeated elements    lt table gt        lt tr gt           lt th gt Product lt  th gt           lt th gt Quantity lt  th gt           lt th gt Price lt  th gt       lt  tr gt        lt tr ng-repeat  product in cart products  gt           lt td gt   product name   lt  td gt           lt td gt   product quantity   lt  td gt           lt td gt   product price   product quantity       lt  td gt       lt  tr gt        lt tr gt           lt td gt  lt  td gt           lt td gt Total   lt  td gt           lt td gt  lt  td gt   lt  -- Here is the total value of my cart -- gt       lt  tr gt    lt  table gt

User · Answer

You can use a custom Angular filter that takes the dataset object array and the key in each object to sum. The filter can then return the sum:

.filter('sumColumn', function(){
        return function(dataSet, columnToSum){
            let sum = 0;

            for(let i = 0; i < dataSet.length; i++){
                sum += parseFloat(dataSet[i][columnToSum]) || 0;
            }

            return sum;
        };
    })

Then in your table to sum a column you can use:

<th>{{ dataSet | sumColumn: 'keyInObjectToSum' }}</th>

User · Answer

This is also working both the filter and normal list  The first thing to create a new filter for the sum of all values from the list  and also given solution for a sum of the total quantity  In details code check it fiddler link   angular module  sampleApp                filter  sumOfValue   function              return function  data  key                        if  angular isUndefined data     angular isUndefined key                   return 0                      var sum   0                      angular forEach data function value                   sum   sum   parseInt value key   10                                       return sum                   filter  totalSumPriceQty   function              return function  data  key1  key2                        if  angular isUndefined data     angular isUndefined key1      angular isUndefined key2                    return 0                      var sum   0              angular forEach data function value                   sum   sum    parseInt value key1   10    parseInt value key2   10                                return sum                   controller  sampleController   function   scope             scope items                 id   1  details    test11   quantity   2  price   100                id   2  details    test12   quantity   5  price   120                id   3  details    test3   quantity   6  price   170                id   4  details    test4   quantity   8  price   70                        lt div ng-app  sampleApp  gt     lt div ng-controller  sampleController  gt       lt div class  col-md-12 col-lg-12 col-sm-12 col-xsml-12  gt         lt label gt Search lt  label gt         lt input type  text  class  form-control  ng-model  searchFilter    gt       lt  div gt       lt div class  col-md-12 col-lg-12 col-sm-12 col-xsml-12  gt         lt div class  col-md-2 col-lg-2 col-sm-2 col-xsml-2  gt           lt h4 gt Id lt  h4 gt          lt  div gt         lt div class  col-md-4 col-lg-4 col-sm-4 col-xsml-4  gt           lt h4 gt Details lt  h4 gt          lt  div gt         lt div class  col-md-2 col-lg-2 col-sm-2 col-xsml-2 text-right  gt           lt h4 gt Quantity lt  h4 gt          lt  div gt         lt div class  col-md-2 col-lg-2 col-sm-2 col-xsml-2 text-right  gt           lt h4 gt Price lt  h4 gt          lt  div gt         lt div class  col-md-2 col-lg-2 col-sm-2 col-xsml-2 text-right  gt           lt h4 gt Total lt  h4 gt          lt  div gt         lt div ng-repeat  item in resultValue  items   filter   details  searchFilter    gt           lt div class  col-md-2 col-lg-2 col-sm-2 col-xsml-2  gt   item id   lt  div gt           lt div class  col-md-4 col-lg-4 col-sm-4 col-xsml-4  gt   item details   lt  div gt           lt div class  col-md-2 col-lg-2 col-sm-2 col-xsml-2 text-right  gt   item quantity   lt  div gt           lt div class  col-md-2 col-lg-2 col-sm-2 col-xsml-2 text-right  gt   item price   lt  div gt           lt div class  col-md-2 col-lg-2 col-sm-2 col-xsml-2 text-right  gt   item quantity   item price   lt  div gt         lt  div gt         lt div colspan  3  class  col-md-8 col-lg-8 col-sm-8 col-xsml-8 text-right  gt           lt h4 gt   resultValue   sumOfValue  quantity    lt  h4 gt          lt  div gt         lt div class  col-md-2 col-lg-2 col-sm-2 col-xsml-2 text-right  gt           lt h4 gt   resultValue   sumOfValue  price    lt  h4 gt          lt  div gt         lt div class  col-md-2 col-lg-2 col-sm-2 col-xsml-2 text-right  gt           lt h4 gt   resultValue   totalSumPriceQty  quantity   price    lt  h4 gt          lt  div gt       lt  div gt     lt  div gt   lt  div gt    check this Fiddle Link

User · Answer

here is my solution to this problem    lt td gt Total     calculateTotal      lt  td gt    script   scope calculateVAT   function          return  scope cart products reduce  accumulator  currentValue    gt  accumulator    currentValue price   currentValue quantity   0        reduce will execute for each product in products array  Accumulator is the total accumulated amount  currentValue is the current element of the array and the 0 in the last is the initial value

User · Answer

This is a simple way to do this with ng-repeat and ng-init to aggregate all the values and extend the model with a item total property    lt table gt   lt tr ng-repeat  item in items  ng-init  setTotals item   gt                       lt td gt   item name   lt  td gt                       lt td gt   item quantity   lt  td gt                       lt td gt   item unitCost   number 2   lt  td gt                       lt td gt   item total   number 2   lt  td gt   lt  tr gt   lt tr class  bg-warning  gt                       lt td gt Totals lt  td gt                       lt td gt   invoiceCount   lt  td gt                       lt td gt  lt  td gt                                           lt td gt   invoiceTotal   number 2   lt  td gt                   lt  tr gt   lt  table gt    The ngInit directive calls the set total function for each item   The setTotals function in the controller calculates each item total  It also uses the invoiceCount and invoiceTotal scope variables to aggregate  sum  the quantity and total for all items      scope setTotals   function item           if  item               item total   item quantity   item unitCost               scope invoiceCount    item quantity               scope invoiceTotal    item total                    for more information and demo look at this link   http   www ozkary com 2015 06 angularjs-calculate-totals-using html

User · Answer

I prefer elegant solutions  In Template   lt td gt Total     totalSum    lt  td gt    In Controller   scope totalSum   Object keys cart products  map function k       return  cart products k  price     reduce function a b   return a   b   0     If you re using ES2015  aka ES6      scope totalSum   Object keys cart products     map k   gt   cart products k  price     reduce  a  b    gt  a   b

User · Answer

I expanded a bit on RajaShilpa s answer   You can use syntax like      object   sumOfTwoValues  quantity   products productWeight      so that you can access an object s child object   Here is the code for the filter    filter  sumOfTwoValues   function          return function  data  key1  key2            if  typeof  data       undefined     typeof  key1       undefined     typeof  key2       undefined                 return 0                    var keyObjects1   key1 split               var keyObjects2   key2 split               var sum   0          for  i   0  i  lt  data length  i                  var value1   data i               var value2   data i               for  j   0  j  lt  keyObjects1 length  j                      value1   value1 keyObjects1 j                              for  k   0  k  lt  keyObjects2 length  k                      value2   value2 keyObjects2 k                              sum   sum    value1   value2                     return sum

User · Answer

Another way of solving this  extending from Vaclav s answer to solve this particular calculation     i e  a calculation on each row        filter  total   function              return function  input  property                var i   input instanceof Array   input length   0              if  typeof property      undefined     i     0                    return i                else if  typeof property      function                     var total   0                   while  i--                      total    property input i                    return total                else if  isNaN input 0  property                      throw  filter total can count only numeric values                 else                   var total   0                  while  i--                      total    input i  property                   return total                                    To do this with a calculation  just add a calculation function to your scope  e g    scope calcItemTotal   function v    return v price v quantity       You would use    datas total calcItemTotal currency    in your HTML code  This has the advantage of not being called for every digest  because it uses filters  and can be used for simple or complex totals   JSFiddle

User · Answer

Realizing this answered long ago  but wanted to post different approach not presented     Use ng-init to tally your total  This way  you do not have to iterate in the HTML and iterate in the controller   In this scenario  I think this is a cleaner simpler solution   If the tallying logic was more complex  I definitely would recommend moving the logic to the controller or service as appropriate           lt tr gt           lt th gt Product lt  th gt           lt th gt Quantity lt  th gt           lt th gt Price lt  th gt       lt  tr gt        lt tr ng-repeat  product in cart products  gt           lt td gt   product name   lt  td gt           lt td gt   product quantity   lt  td gt           lt td ng-init  itemTotal   product price   product quantity  controller Total   controller Total   itemTotal  gt   itemTotal       lt  td gt       lt  tr gt        lt tr gt           lt td gt  lt  td gt           lt td gt Total   lt  td gt           lt td gt    controller Total    lt  td gt     Here is the total value of my cart      lt  tr gt      Of course  in your controller  simply define initialize your Total field      random controller snippet function yourController  scope     blah        var vm   this      vm Total   0

User · Answer

This is my solution   lt div ng-controller  MainCtrl as mc  gt     lt ul gt         lt li ng-repeat  n in  1 2 3 4   ng-init  mc sum     first   0   mc sum    n  gt   n   lt  li gt         lt li gt sum     mc sum   lt  li gt     lt  ul gt   lt  div gt    It require you to add name to controller as Controller as SomeName so we can cache variable in there  is it really require  I don t familiar with using  parent so I don t know   Then for each repeat  add ng-init SomeName SumVariable     first   0   SomeName SumVariable    repeatValue    first for checking it is first then it reset to zero  else it would continue aggregate value  http   jsfiddle net thainayu harcv74f

User · Answer

After reading all the answers here - how to summarize grouped information  i decided to skip it all and just loaded one of the SQL javascript libraries  I m using alasql  yeah it takes a few secs longer on load time but saves countless time in coding and debugging  Now to group and sum   I just use    scope bySchool   alasql  SELECT School  SUM Cost  AS Cost from   GROUP BY School   restResults      I know this sounds like a bit of a rant on angular js but really SQL solved this 30  years ago and we shouldn t have to re-invent it within a browser

User · Answer

In html   lt b class  text-primary  gt Total Amount      data allTicketsTotalPrice      lt  b gt    in javascript    app controller  myController   function   http                var vm   this                        vm allTicketsTotalPrice   function                      var totalPrice   0                  angular forEach vm ticketTotalPrice  function  value  key                        totalPrice    parseFloat value                                       return totalPrice toFixed 2

User · Answer

Angular 6  Grand Total              lt h2 align  center  gt Usage Details Of   profile  firstName   lt  h2 gt           lt table align   center  gt             lt tr gt               lt th gt Call Usage lt  th gt               lt th gt Data Usage lt  th gt               lt th gt SMS Usage lt  th gt               lt th gt Total Bill lt  th gt             lt  tr gt             lt tr gt             lt tr  ngFor  let user of bills   gt               lt td gt    user callUsage   lt  td gt               lt td gt    user dataUsage    lt  td gt               lt td gt    user smsUsage    lt  td gt          lt td gt   user callUsage  2   user dataUsage  1   user smsUsage  1   lt  td gt             lt  tr gt               lt tr gt               lt th gt   lt  th gt               lt th gt Grand Total lt  th gt               lt th gt  lt  th gt               lt td gt   total  bills     lt  td gt             lt  tr gt           lt  table gt            Controller            total bills                var total   0              bills forEach element   gt    total   total    element callUsage   2   element dataUsage   1   element smsUsage   1                               return total

User · Answer

In Template   lt td gt Total     getTotal      lt  td gt    In Controller   scope getTotal   function        var total   0      for var i   0  i  lt   scope cart products length  i             var product    scope cart products i           total     product price   product quantity             return total

User · Answer

You may try using services of angular js  it has worked for me  giving the code snippets below  Controller code    scope total   0  var aCart   new CartService      scope addItemToCart   function  product        aCart addCartTotal product Price        scope showCart   function               scope total   aCart getCartTotal         Service Code   app service  CartService   function           Total           Total length   0       return function               this addCartTotal   function  inTotal                Total push  inTotal                      this getCartTotal   function                  var sum   0              for  var i   0  i  lt  Total length  i                      sum    parseInt Total i   10                              return sum

User · Answer

Taking Vaclav s answer and making it more Angular-like   angular module  myApp   filter  total      parse   function   parse        return function  input  property            var i   input instanceof Array   input length   0              p    parse property            if  typeof property      undefined     i     0                return i            else if  isNaN p input 0                   throw  filter total can count only numeric values             else               var total   0              while  i--                  total    p input i                return total                          This gives you the benefit of even accessing nested and array data     data   total  values 0  value

User · Answer

Huy Nguyen s answer is almost there  To make it work  add   ng-repeat    in   products         to the line with ng-init  The list always has a single item  so Angular will repeat the block exactly once   Zybnek s demo using filtering can be made to work by adding   ng-repeat    in     products  search        See http   plnkr co edit dLSntiy8EyahZ0upDpgy p preview

User · Answer

Simple Solution  Here is a simple solution  No additional for loop required   HTML part            lt table ng-init  ResetTotalAmt    gt                   lt tr gt                       lt th gt Product lt  th gt                       lt th gt Quantity lt  th gt                       lt th gt Price lt  th gt                   lt  tr gt                    lt tr ng-repeat  product in cart products  gt                       lt td ng-init  CalculateSum product   gt   product name   lt  td gt                       lt td gt   product quantity   lt  td gt                       lt td gt   product price   product quantity       lt  td gt                   lt  tr gt                    lt tr gt                       lt td gt  lt  td gt                       lt td gt Total   lt  td gt                       lt td gt   cart TotalAmt   lt  td gt     Here is the total value of my cart                  lt  tr gt               lt  table gt    Script Part    scope cart TotalAmt   0    scope CalculateSum  function  product        scope cart TotalAmt     product price   product quantity        It is enough to Write code  scope cart TotalAmt  0  in the function where the cart products get allocated value    scope ResetTotalAmt   function  product        scope cart TotalAmt  0

User · Answer

This is my solution  sweet and simple custom filter    but only related to simple sum of values  not sum product  I ve made up sumProduct filter and appended it as edit to this post    angular module  myApp             filter  total   function              return function  input  property                var i   input instanceof Array   input length   0     if property is not defined  returns length of array    if array has zero length or if it is not an array  return zero             if  typeof property      undefined     i     0                    return i     test if property is number so it can be counted               else if  isNaN input 0  property                      throw  filter total can count only numeric values      finaly  do the counting and return total               else                   var total   0                  while  i--                      total    input i  property                   return total                                    JS Fiddle  EDIT  sumProduct  This is sumProduct filter  it accepts any number of arguments  As a argument it accepts name of the property from input data  and it can handle nested property  nesting marked by dot  property nested     Passing zero argument returns length of input data  Passing just one argument returns simple sum of values of that properties  Passing more arguments returns sum of products of values of passed properties  scalar sum of properties     here s JS Fiddle and the code  angular module  myApp            filter  sumProduct   function             return function  input                var i   input instanceof Array   input length   0              var a   arguments length              if  a     1    i     0                  return i               var keys                   while  a--  gt  1                    var key   arguments a  split                       var property   getNestedPropertyByKey input 0   key                   if  isNaN property                       throw  filter sumProduct can count only numeric values                   keys push key                              var total   0              while  i--                    var product   1                  for  var k   0  k  lt  keys length  k                        product    getNestedPropertyByKey input i   keys k                    total    product                            return total               function getNestedPropertyByKey data  key                    for  var j   0  j  lt  key length  j                        data   data key j                    return data                                   JS Fiddle

User · Answer

You can calculate total inside ng-repeat follow    lt tbody ng-init  total   0  gt     lt tr ng-repeat  product in products  gt       lt td gt    product name    lt  td gt       lt td gt    product quantity    lt  td gt       lt td ng-init   parent total    parent total    product price   product quantity   gt     product price   product quantity    lt  td gt     lt  tr gt     lt tr gt       lt td gt Total lt  td gt       lt td gt  lt  td gt       lt td gt     total    lt  td gt     lt  tr gt   lt  tbody gt    Check result here  http   plnkr co edit Gb8XiCf2RWiozFI3xWzp p preview  In case automatic update result  http   plnkr co edit QSxYbgjDjkuSH2s5JBPf p preview  Thanks     VicJordan

[angularjs] Calculating sum of repeated elements in AngularJS ng-repeat

Examples related to angularjs

Examples related to angularjs-ng-repeat