How to calculate the total sum of items in array element using AngularJS

Question

I have a table that has a column named priced,what I want is to calculate the total price of the items.What I tried doesn't add all the total price it just displays the same values that are in the table row.I have included a link to jsbin.

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<html>
<div ng-app>
        <div ng-controller="ShoppingCartCtrl">
            <br />
            <table border="1">
                <thead>
                    <tr>
                        <td>Name</td>
                        <td>Price</td>
                        <td>Quantity</td>
                        <td>Remove Item</td>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in items">
                        <td>{{item.Name}}</td>
                        <td>{{item.Price}}</td>
                        <td>{{item.Quantity}}</td>
                        <td><input type="button" value="Remove" ng-click="removeItem($index)" /></td>
                    </tr>
                </tbody>
            </table>
            <br />
            <div>Total Price: {{totalPrice()}}</div>
            <br />
            <table>
                <tr>
                    <td>Name: </td>
                    <td><input type="text" ng-model="item.Name" /></td>
                </tr>
                <tr>
                    <td>Price: </td>
                    <td><input type="text" ng-model="item.Price" /></td>
                </tr>
                <tr>
                    <td>Quantity: </td>
                    <td><input type="text" ng-model="item.Quantity" /></td>
                </tr>
                <tr>
                    <td colspan="2"><input type="Button" value="Add" ng-click="addItem(item)" /> </td>

                </tr>
            </table>
        </div>
    </div>
</html>

function ShoppingCartCtrl($scope)  {
        $scope.items = [
            {Name: "Soap", Price: "25", Quantity: "10"},
            {Name: "Shaving cream", Price: "50", Quantity: "15"},
            {Name: "Shampoo", Price: "100", Quantity: "5"}
        ];

        $scope.addItem = function(item) {
            $scope.items.push(item);
            $scope.item = {};
        };

        $scope.totalPrice = function(){
            var total = 0;
            for(count=0;count<$scope.items.length;count++){
                total +=$scope.items[count].Price + $scope.items[count].Price;
            }
            return total;
        };

        $scope.removeItem = function(index){
            $scope.items.splice(index,1);
        };
    }

http://jsbin.com/mapigagawa/1/edit?html,js,output

Ghyath Serhal · Accepted Answer · 2014-11-12 11:11:33Z

4

Your problem is that you defined the price and quantity as string and not as numbers. You have two choices

Define the Price and quantity as numbers and not strings, which is the better solution

use parseInt or parseFloat during the calculation

function ShoppingCartCtrl($scope)  {
$scope.items = [
    {Name: "Soap", Price: 25, Quantity: 10},
    {Name: "Shaving cream", Price: 50, Quantity: 15},
    {Name: "Shampoo", Price: 100, Quantity: 5}
];

$scope.addItem = function(item) {
    $scope.items.push(item);
    $scope.item = {};
};

$scope.totalPrice = function(){
    var total = 0;
    for(count=0;count<$scope.items.length;count++){
        total += $scope.items[count].Price + $scope.items[count].Price;
    }
    return total;
};

$scope.removeItem = function(index){
    $scope.items.splice(index,1);
};
}

edited Nov 12, 2014 at 11:11

answered Nov 12, 2014 at 11:05

Ghyath Serhal

7,6326 gold badges47 silver badges63 bronze badges

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

2 Comments

Callum Linington Over a year ago

Could I also make a suggestion, and that is to always use parseInt(someNumber, 10), i.e. include the base value. Otherwise you could get some weird things happening. Also, if it is price's we're working with, might I suggest parseFloat instead

user3811714 Over a year ago

Thanks hey I don't need to have 2 parseInt just one only total += parseInt($scope.items[count].Price);

Nathan White · Accepted Answer · 2014-11-12 11:09:38Z

1

Similar to what Ghyath Serhal has said, use this code instead of what you have

$scope.items = [
    {Name: "Soap", Price: 25, Quantity: 10},
    {Name: "Shaving cream", Price: 50, Quantity: 15},
    {Name: "Shampoo", Price: 100, Quantity: 5}
];

I don't see any need for integer values in this instance to be strings, so using them as integers will solve your problem.

answered Nov 12, 2014 at 11:09

Nathan White

1,0907 silver badges21 bronze badges

1 Comment

Callum Linington Over a year ago

Don't forget the quantity!

Collectives™ on Stack Overflow

How to calculate the total sum of items in array element using AngularJS

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related