title: Knockout.js: Sum grouped values within table and foreach
body: <p>The table with the data-bindings currently looks like below:</p>
  
  <pre><code>Source        Calls     ChargeableCalls
  
  Car Insurance
  08434599111     3            2
  08934345122     2            1
  
  Home Insurance
  08734599333     3            2
  08034345555     2            1
  </code></pre>
  
  <p>The <strong>desired output</strong> should be like in the bellow example, The table should contain total values for <code>Calls</code> and <code>ChargeableCalls</code> grouped by Division, and total values for all <code>Calls</code> and <code>ChargeableCalls</code> within the table.</p>
  
  <pre><code>Source          Calls         ChargeableCalls
  
  Car Insurance
  08434599154       3                  2
  08934345555       2                  1
  Total Calls       5     Total CC     3
  
  Home Insurance
  08434599154       6                  3
  08934345555       1                  0
  Total Calls       7     Total CC     3
  
  Total Calls All  24     Total CC All 12
  </code></pre>
  
  <p>Here are the bindings within the table:</p>
  
  <pre><code>&lt;table class="table table-condensed" id="reportData"&gt;
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;Source&lt;/th&gt;
          &lt;th&gt;TotalCalls&lt;/th&gt;
          &lt;th&gt;ChargeableCalls&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody data-bind="foreach: groups"&gt;
       &lt;!-- ko foreach: $root.getGroup($data) --&gt;
      &lt;tr data-bind="if: $index() == 0"&gt;
          &lt;td colspan="3" data-bind="text: division" class="division"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td data-bind="text: source"&gt;&lt;/td&gt;
          &lt;td data-bind="text: totalCalls"&gt;&lt;/td&gt;
          &lt;td data-bind="text: chargeableCalls"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;!-- /ko --&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here's my ViewModel:</p>
  
  <pre><code>function GroupedReportingViewModel() {
      var self = this;
  
      self.results = ko.observableArray();
  
      self.groupedResults = {};
  
      self.getGroup = function (group) {
         return self.groupedResults[group];
      };
  
      self.groupedResultsC = ko.computed(function () {
          self.groupedResults = {};
          ko.utils.arrayForEach(self.results(), function (r) {
             if (!self.groupedResults[r.division]) self.groupedResults[r.division] = [];
                          self.groupedResults[r.division].push(r);
                      });
             return self.groupedResults;
                  });
  
       self.groups = ko.computed(function () {
           var g = [];
           for (x in self.groupedResultsC())
                  g.push(x);
                  return g;_
         });
      }
  
       var model = new GroupedReportingViewModel();
       ko.applyBindings(model);
  </code></pre>
  
  <p>The <code>results</code> observableArray gets populated from an ajax response, like below:</p>
  
  <pre><code>success: function (jsondata) {
          model.results(jsondata["Data"]["Report"]);
  }
  </code></pre>
  
  <p>The <code>jsondata</code> object looks like below:</p>
  
  <pre><code>{"Data":
      {"Report":[ {"source":"08434599494","division":"Car Insurance","totalCalls":5, "chargeableCalls":23},
                  {"source":"08434599172","division":"Car Insurance","totalCalls":512,"chargeableCalls":44},
                  {"source":"08434599129","division":"Home  Insurance","totalCalls":4, "chargeableCalls":2},
                  {"source":"08434599215","division":"Home Insurance","totalCalls":234, "chargeableCalls":54},
                  {"source":"08434599596","division":"Car Insurance","totalCalls":332, "chargeableCalls":266}
                ]
      }
  }
  </code></pre>
  
  <p><strong>Q:</strong> How can I achieve the desired output?</p>