Calculate column average in Angularjs

Question

I am struggling in the angularjs average calculating problems, here is the situation

enter image description here

The table's data are drawn from server and update regularly itself (by ajax), I want to calculate at the same time the average of the column and display the result at the last row of the table. The following are the relevant codes on displaying the table

        <tr ng-repeat="rowData in pData">
            <td ng-repeat="cellData in rowData track by $index">{{cellData}}</td>
        </tr>

        <tr>
            <td>{{averDatum}}</td>
            (need to calculate 6 column's average)
        </tr>

Where the cellData are displayed via

$http({method: 'GET', url: './partials/getData.php?getTblData=1'}).
    success(function(data, status, headers, config) {
      // this callback will be called asynchronously
      // when the response is available
        $scope.pData = data.rowData;
        $scope.upData = data.dateData;
    });

And the data format is
enter image description here

Thanks all for the help!

So, what have you tried? I don't see any attempt at computing an average in what you posted. — JB Nizet
Thanks for the reply, actually I do not know where to start from, should I make use of the $scope.pData and use angular.forEach to loop through and calculate the average? — user2361494
Yes, you need to loop over the rows of $scope.pData, get the amount from each row, extract its numeric value, add it to a total amount, and divide the total amount at the end of the loop b the number of rows. You can use forEach or a simple JavaScript for loop. — JB Nizet
I got it, thanks, but I have 6 columns to calculate, how could I display the 6 averData properly? Using 6 Markups or others? — user2361494
Instead of having one total amount, you use an array containing 6 total amounts. At each iteration, you add the 6 amounts of the current row to the corresponding total amount in the array. At the end of the loop, you divide the 6 total amounts of the array by the number of rows. — JB Nizet

Egor Smirnov Egor Smirnov · Accepted Answer · 2014-08-17T12:19:13

Something like this could work (please check if this is correct, I could do a mistake of course, but the whole idea is understandable I think):

$http({method: 'GET', url: './partials/getData.php?getTblData=1'}).
     success(function(data, status, headers, config) {
         // this callback will be called asynchronously
         // when the response is available
         $scope.pData = data.rowData;
         $scope.upData = data.dateData;

         var n = $scope.pData.length;
         var m = $scope.pData[0].length;
         var sum = 0;

         for (var i = 0; i < m; i++) 
         {
             sum = 0;
             for (var j = 0; j < n; j++)
             {
                   sum += parseInt($scope.pData[j][i].replace('$', ''), 10);
             }
             $scope.pData[j + 1][i] = '$' + Math.ceil(sum / j);
         }

});

How this works in brief:

1) You are going to modify array arrived from http call by adding additional row with average numbers for each column.

2) In order to do this you iterate over each column, calculating the sum for this column (this is done using 2 'for' cycles). In the end of inner cycle we calculate average by dividing sum by number of rows.

3) In the end, you don't have to adjust your view markup - calculated average value will be just appended to the $scope.pData. In case you need separate variable for storing averages - just create it and modify it instead of modifying $scope.pData.

Calculate column average in Angularjs

1 Answers