0

I have a controller of Angular JS which sum numbers of values with the help of range loop but now I have requirement need to sum previous value of total with each iteration. I have tried with so many filters but no success. I have require desired result. Helps are definitely appreciated.

var arr = [
  {
    "unique_id": "CS",
    "college": "BSCS",
    "arr_length": 1,
    "program_section": [
      {
        "question": "Q1",
        "total": 135,
        
      },
      {
        "question": "Q2",
        "total": 142,
        
      },
      {
        "question": "Q3",
        "total": 135,
        
      },
      {
        "question": "Q4",
        "total": 137,
        
      },
      
    ]
  },
  {
    "unique_id": "MBA",
    "college": "BBA",
    "arr_length": 2,
    "program_section": [
      {
        "question": "Q1",
        "total": 175,
        
      },
      {
        "question": "Q2",
        "total": 142,
        
      },
      {
        "question": "Q3",
        "total": 165,
        
      },
      {
        "question": "Q4",
        "total": 137,
        
      },
      
    ]
  },
  {
    "unique_id": "CA",
    "college": "Account",
    "arr_length": 1,
    "program_section": [
      {
        "question": "Q1",
        "total": 145,
        
      },
      {
        "question": "Q2",
        "total": 162,
        
      },
      {
        "question": "Q3",
        "total": 125,
        
      },
      {
        "question": "Q4",
        "total": 117,
        
      },
      
    ]
  }
];
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $scope.names = arr;
}).filter('range', function() {
  return function(input, total) {
    total = parseInt(total);

    for (var i=0; i<total; i++) {
      input.push(i);
    }

    return input;
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl"> 

<table  border="1">
<thead>
  <tr>
    <td>Question</td>
    <td ng-repeat="x in names">{{ x.college }}</td>
  </tr>
</thead>
<tbody>
      <tr ng-repeat="n in [] | range:4">
        <td>
            {{ names[0].program_section[n].question }}
        </td>
        <td width="100px" ng-repeat="x in names">
           {{ x.program_section[n].total }}
        </td>
      </tr>
</tbody>
  
</table>

</div>

Desired Result

<table width="426" border="1">
  <tr>
    <td width="79">Question</td>
    <td >BSCS</td>
    <td >BBA</td>
    <td >Account</td>
    <td >Total</td>
  </tr>
  <tr>
    <td>Q1</td>
    <td>135</td>
    <td>175</td>
    <td>145</td>
    <td width="50" >455</td>
  </tr>
  <tr>
    <td>Q2</td>
    <td>142</td>
    <td>142</td>
    <td>162</td>
    <td width="50" >446</td>
  </tr>
  <tr>
    <td>Q3</td>
    <td>135</td>
    <td>165</td>
    <td>125</td>
    <td width="50" >425</td>
  </tr>
  <tr>
    <td>Q4</td>
    <td>137</td>
    <td>137</td>
    <td>117</td>
    <td width="50" >391</td>
  </tr>
</table>

1 Answer 1

1

You could just calculate the totals in the controller and use that to generate remaining column:

$scope.totals = {}
    arr.map(function(obj){
        obj.program_section.map(function(section){
            $scope.totals[section.question] = ($scope.totals[section.question] || 0) + section.total
        })
    })

Here totals[Qx] will have totals for Qx, and we use that in the view:

var arr = [
  {
    "unique_id": "CS",
    "college": "BSCS",
    "arr_length": 1,
    "program_section": [
      {
        "question": "Q1",
        "total": 135,
        
      },
      {
        "question": "Q2",
        "total": 142,
        
      },
      {
        "question": "Q3",
        "total": 135,
        
      },
      {
        "question": "Q4",
        "total": 137,
        
      },
      
    ]
  },
  {
    "unique_id": "MBA",
    "college": "BBA",
    "arr_length": 2,
    "program_section": [
      {
        "question": "Q1",
        "total": 175,
        
      },
      {
        "question": "Q2",
        "total": 142,
        
      },
      {
        "question": "Q3",
        "total": 165,
        
      },
      {
        "question": "Q4",
        "total": 137,
        
      },
      
    ]
  },
  {
    "unique_id": "CA",
    "college": "Account",
    "arr_length": 1,
    "program_section": [
      {
        "question": "Q1",
        "total": 145,
        
      },
      {
        "question": "Q2",
        "total": 162,
        
      },
      {
        "question": "Q3",
        "total": 125,
        
      },
      {
        "question": "Q4",
        "total": 117,
        
      },
      
    ]
  }
];
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $scope.names = arr;
    $scope.totals = {}
    arr.map(function(obj){
        obj.program_section.map(function(section){
            $scope.totals[section.question] = ($scope.totals[section.question] || 0) + section.total
        })
    })
}).filter('range', function() {
  return function(input, total) {
    total = parseInt(total);

    for (var i=0; i<total; i++) {
      input.push(i);
    }

    return input;
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl"> 

<table  border="1">
<thead>
  <tr>
    <td>Question</td>
    <td ng-repeat="x in names">{{ x.college }}</td>
    <td>Totals</td>
  </tr>
</thead>
<tbody>
      <tr ng-repeat="n in [] | range:4">
        <td>
            {{ names[0].program_section[n].question }}
        </td>
        <td width="100px" ng-repeat="x in names" >
           {{ x.program_section[n].total }}
        </td>
        <td width="50%" ng-bind="totals[names[0].program_section[n].question]"></td>
      </tr>
      
</tbody>
  
</table>

</div>

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

2 Comments

Thankyou you save my day!
@QueryMaster no problem, note that if you change the data in arr, you will have to recalculate the totals

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.