Incorrect sum of rows in HTML table using Angular

Question

I am stuck with getting the correct total revenue (total Media Cost, total Revenue, and total Profit) for each month. I have created a plunker for the same. Can you, please, help?

Plunker http://plnkr.co/edit/7taIugnhGPZbqCMGpUza?p=preview

script.js

var app = angular.module('plunker', []);
app.controller('AppController',['$scope',
  function($scope) {
    $scope.total = function(i){
      var totalMediaCost = 0;
      var totalRevenue = 0;
      var totalProfit = 0;
      $scope.array = [];
        console.log('i.revenue', i.revenue);
        for (var data in i.revenue){
          console.log('data', data);
          totalMediaCost += i.revenue[data].a;
          totalRevenue += i.revenue[data].b;
          totalProfit += i.revenue[data].c;

        } 
      $scope.array.push({'totalMediaCost': totalMediaCost});

    }

    $scope.rows = [
    {
      "month": "Feb-01",
      "revenue": [
        {
          "account": {
          "id": 1,
          "name": "user alpha"
        },
          "a": 111,
          "b": 222,
          "c": 333
        },
        {
          "account": {
          "id": 2,
          "name": "user beta"
        },
          "a": 1,
          "b": 2,
          "c": 3,
        },
        {
          "account": {
          "id": 3,
          "name": "user gamma"
        },
          "a": 141,
          "b": 242,
          "c": 343
        }
      ]
     },
     {
      "month": "Mar-02",
      "revenue": [
      {
        "account": {
        "id": 1,
        "name": "user alpha"
      },
        "a": 100,
        "b": 200,
        "c": 300
      },
      {
        "account": {
        "id": 14,
        "name": "user beta"
      },
        "a": 101,
        "b": 202,
        "c": 303
      },
      {
        "account": {
        "id": 3,
        "name": "user gamma"
      },
        "a": 241,
        "b": 342,
        "c": 443
      }
     ]
    }
  ];

  }
]
);

index.html

<!doctype html>
<html ng-app="plunker">

<head>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
  <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
  <script src="script.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css" />
</head>

<body ng-controller="AppController">

  {{rows | json}}

  <hr>

  <table class="table">

    <tr>
      <th></th>
      <th>Account</th>
      <th>Media Cost</th>
      <th>Revenue</th>
      <th>Profit</th>
    </tr>
    <tbody ng:repeat="i in rows">
      <tr>
        <td rowspan="{{i.revenue.length+1}}">{{i.month}}</td>
        <tr ng:repeat="data in i.revenue">
          <td>{{data.account.name}}</td>
          <td>{{data.a}}</td>
          <td>{{data.b}}</td>
          <td>{{data.c}}</td>
        </tr>
        <tr ng-init="total(i)">
          <td></td>
          <td>Total Revenue</td>
          <td>{{array[0].totalMediaCost}}</td>
          <td>{{}}</td>
          <td>{{}}</td>
        </tr>
      </tr>
    </tbody>

  </table>

</body>
</html>

Nikhilesh K V · Accepted Answer · 2016-05-02 06:48:06Z

3

Here is a working sample : http://plnkr.co/edit/bB7up1rhOSad9Xoq3SsQ?p=preview

Its better to use the existing rows array and push the total inside each row object rather than creating a separate variable in scope.

$scope.total = function(i,index) {
    $scope.rows[index].totalMediaCost = totalMediaCost;
}

<tr ng-init="total(i,$index)">

answered May 2, 2016 at 6:48

Nikhilesh K V

1,48013 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Thorarins · Accepted Answer · 2016-05-02 06:33:22Z

1

you are using the same variable twice, wich gives you the totalMediaCost of the last array for both tables

you should change the totalMediaCost to an array or similar

answered May 2, 2016 at 6:33

Thorarins

1,90417 silver badges21 bronze badges

Comments

Fidel90 · Accepted Answer · 2016-05-02 06:58:23Z

I've edited your approach a little. Check out this plunker.

JS:

$scope.total = {
    cost : [],
    revenue : [],
    profit : []
  };

  for (var month in $scope.rows) {
    if ($scope.rows.hasOwnProperty(month)) {
      var revData = $scope.rows[month]["revenue"],
          totalCost = 0,
          totalRevenue = 0,
          totalProfit = 0;

      revData.forEach(function (account) {
        totalCost += account["a"];
        totalRevenue += account["b"];
        totalProfit += account["c"];
      });

      $scope.total.cost.push(totalCost);
      $scope.total.revenue.push(totalRevenue);
      $scope.total.profit.push(totalProfit);
    }
  }

HTML:

<tbody ng:repeat="i in rows">
     <tr>
      <td rowspan="{{i.revenue.length+1}}">{{i.month}}</td>
      <tr ng:repeat="data in i.revenue">
        <td>{{data.account.name}}</td>
        <td>{{data.a}}</td>
        <td>{{data.b}}</td>
        <td>{{data.c}}</td>
      </tr>
      <tr>
        <td></td>
        <td>Total</td>
        <td>{{total.cost[$index]}}</td>
        <td>{{total.revenue[$index]}}</td>
        <td>{{total.profit[$index]}}</td>
      </tr>
  </tr>
  </tbody>

Collectives™ on Stack Overflow

Incorrect sum of rows in HTML table using Angular

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related