CODEWITHSUNDEEP
javascriptangularjs
Ali Malyani
Ali Malyani

Reputation: 11

Adding string Array in Angular

I have created this app in Angular as a practice can't seem to add the amount to a total value... Here is the Code I need to put the total value of the amount.

<body>
<div class="container" ng-app="myApp" ng-controller="namesCtrl">
<div class="col-sm-6"><br>
<button  class="btn btn-default" ng-click="myFunc()">Show me the Table</button><br>
<div ng-show="showMe">
<table  class="table"  width="80%" border="2px">

    <tr class="panel panel-default">
        <th> Names</th>
        <th>Country</th>
        <th>Amount</th>
    </tr>
    <tr ng-repeat= "x in names">    
        <td class="info"> {{x.name}}</td>
        <td class="danger">{{x.country}}</td>
        <td class="default">{{x.amount}}</td>       
    </tr>



</table>
</div>  
</div>
</div>      
<script>
    var app=angular.module("myApp", []);
    app.controller("namesCtrl", function($scope){

$scope.names = [
    {name:'Jani',country:'Norway',  amount:'321'},
    {name:'Carl',country:'Sweden',amount:'2231'},
    {name:'Margareth',country:'England',amount:'521'},
    {name:'Hege',country:'Norway',amount:'1720'},
    {name:'Joe',country:'Denmark',amount:'376'},
    {name:'Gustav',country:'Sweden',amount:'3040'},
    {name:'Birgit',country:'Denmark',amount:'1115'},
    {name:'Mary',country:'England',amount:'4501'},
    {name:'Kai',country:'Norway',amount:'4533'}
    ];

        $scope.showMe=false;
        $scope.myFunc=function(){
        $scope.showMe=!$scope.showMe;

    }

    });

</script>
</body>
</html>

it would be help ful for me to Know how to add the amount to a total value.

Upvotes: 0

Views: 65

Answers (2)

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41427

you can use javascript reduce method to get the sum of array

ES6 implementation 

$scope.sum = $scope.names.reduce((a, b) => a + parseInt(b.amount), 0);

ES5 implementation 

$scope.sum = $scope.names.reduce(function(a,b){
  return  a + parseInt(b.amount)
},0);

Demo 

angular.module("app",[])
.controller("ctrl",function($scope){
$scope.names = [
    {name:'Jani',country:'Norway',  amount:'321'},
    {name:'Carl',country:'Sweden',amount:'2231'},
    {name:'Margareth',country:'England',amount:'521'},
    {name:'Hege',country:'Norway',amount:'1720'},
    {name:'Joe',country:'Denmark',amount:'376'},
    {name:'Gustav',country:'Sweden',amount:'3040'},
    {name:'Birgit',country:'Denmark',amount:'1115'},
    {name:'Mary',country:'England',amount:'4501'},
    {name:'Kai',country:'Norway',amount:'4533'}
    ];
    
      /// es6 
    $scope.sum = $scope.names.reduce((a, b) => a + parseInt(b.amount), 0);
    
    console.log('es6 - '+$scope.sum)
    
    /// es5
    
    $scope.sum = $scope.names.reduce(function(a,b){
      return  a + parseInt(b.amount)
    },0);
    
    console.log("es5 - "+$scope.sum)
 

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

Upvotes: 0

Robby Cornelissen
Robby Cornelissen

Reputation: 97152

Using Array.prototype.reduce():

$scope.total = $scope.names.reduce((a, v) => a + parseInt(v.amount));

Note that you would need to use parseFloat() instead of parseInt() if your amounts contain decimal values.

Here's a complete snippet:

var $scope = {};

$scope.names = [
    {name:'Jani',country:'Norway',  amount:'321'},
    {name:'Carl',country:'Sweden',amount:'2231'},
    {name:'Margareth',country:'England',amount:'521'},
    {name:'Hege',country:'Norway',amount:'1720'},
    {name:'Joe',country:'Denmark',amount:'376'},
    {name:'Gustav',country:'Sweden',amount:'3040'},
    {name:'Birgit',country:'Denmark',amount:'1115'},
    {name:'Mary',country:'England',amount:'4501'},
    {name:'Kai',country:'Norway',amount:'4533'}
];

$scope.total = $scope.names.reduce((a, v) => a + parseInt(v.amount), 0);

console.log($scope.total);

Upvotes: 2

Related Questions