The Best Way to Calculate a Total Sum with Comma-Separated Values in AngularJS

Question

The Best Way to Calculate a Total Sum with Comma-Separated Values in AngularJS

In my application, I am utilizing the MEAN stack with AngularJS as the front-end. I am trying to figure out how to calculate the total sum and include comma values. I have managed to get the total sum value, but the comma value is not being calculated properly. You can take a look at my Plunker for more details. For example, when I calculate the total sum of "amt" values without commas, I get the answer 3850.20. But when I include the commas in the "amount payment" values, the total sum I get is 2.00. I am expecting a result like 3850.20. If anyone knows the solution, I would appreciate your help. Thanks.

My controller:

    .filter('sumOfValue', function () {
    return function (data, key) {
        debugger;
        if (angular.isUndefined(data) && angular.isUndefined(key))
            return 0;        
        var sum = 0;

        angular.forEach(data,function(v,k){
            sum = sum + parseFloat(v[key]);
        });        
        return sum.toFixed(2);
    }
})

My Html:

<td >{{mani.amt}}</td>

  <td >{{mani.amount_payment }}</td>

My Data:

    {
"_id": "5816f4fad0be79f809519f98",
"user": {
"_id": "57400c32bd07906c1308e2cf",
"displayName": "mani selvam"
},
"__v": 0,
"created": "2016-10-31T07:38:34.999Z",
"remarks": "-",
"status": "pending",
"amt": "1925.10",
"cheque_currency": "Rs",
"cheque_value": "300",
"amount_payment": "1,925.10",
"debitnote_no_payment": "3",
"supplier_name": "karikalan",
"buyer_name": "Manidesigns"
},

{
"_id": "5816f4fad0be79f809519f98",
"user": {
"_id": "57400c32bd07906c1308e2cf",
"displayName": "mani selvam"
},
"__v": 0,
"created": "2016-10-31T07:38:34.999Z",
"remarks": "-",
"status": "pending",
"amt": "1925.10",
"cheque_currency": "Rs",
"cheque_value": "300",
"amount_payment": "1,925.10",
"debitnote_no_payment": "3",
"supplier_name": "karikalan",
"buyer_name": "Manidesigns"
},

For reference, I have created a Plunker: Plunker

html css angularjs meanjs

Answer 1

Answer №1

It is advisable to avoid storing or passing numbers with formatting included. For example, instead of passing the number "amount_payment": "1,925.10", it is better to pass it as "amount_payment": "1925.10" (without comma) or even better as a float: "amount_payment": 1925.10. You can then format it in your views using the Number's toLocaleString() function like this: (1925.10).toLocaleString() or ("1925.10").toLocaleString(). When summing up the values, you can simply remove commas:

angular.forEach(data, function(v) {
  sum = sum + parseFloat(v[key].replace(',', ''));
});

You can also utilize the reduce() function for summing up:

app.filter('sumOfValue', function() {
  return function(data, key) {
    if (!data || !data[0] || !data[0][key]) {
      return 0; 
    }

    var sum = data.reduce(function(sum, val) {
      return sum + parseFloat(val[key].replace(',', ''));
    }, 0);

    return sum.toFixed(2);
  }
})

Here is a link to a plunker example: http://plnkr.co/edit/8Hllaw254sBO2nbaZlKQ?p=preview

Answer 2

It is advisable to avoid storing or passing numbers with formatting included. For example, instead of passing the number "amount_payment": "1,925.10", it is better to pass it as "amount_payment": "1925.10" (without comma) or even better as a float: "amount_payment": 1925.10. You can then format it in your views using the Number's toLocaleString() function like this: (1925.10).toLocaleString() or ("1925.10").toLocaleString(). When summing up the values, you can simply remove commas:

angular.forEach(data, function(v) {
  sum = sum + parseFloat(v[key].replace(',', ''));
});

You can also utilize the reduce() function for summing up:

app.filter('sumOfValue', function() {
  return function(data, key) {
    if (!data || !data[0] || !data[0][key]) {
      return 0; 
    }

    var sum = data.reduce(function(sum, val) {
      return sum + parseFloat(val[key].replace(',', ''));
    }, 0);

    return sum.toFixed(2);
  }
})

Here is a link to a plunker example: http://plnkr.co/edit/8Hllaw254sBO2nbaZlKQ?p=preview

The Best Way to Calculate a Total Sum with Comma-Separated Values in AngularJS

Answer №1

Similar questions

Is a server necessary for utilizing HTML5's WebSockets?

Method for eliminating double quotes from a string bound in Angular

Ways to restrict the input of only a single value when writing data using Firebase security guidelines

Tips for preventing an element from scrolling horizontally along with the page body

"How can I adjust the height of a Bootstrap column to match the height of its neighboring column

What is the best way to centralize the storage of my website's header and footer?

``There seems to be a problem with the module execution

How to Exclude ress.css in Vuetify.js

Position the image between two div containers in the center of the screen, ensuring it is responsive and does not overlap with any text

Create a feature that allows users to dynamically add and remove image fields, with the ability to insert the selected images into a database

Utilize a single CDN or multiple CDNs to access and retrieve files

Is there a way for me to superimpose text onto an image in this instance?

Identify support for the :first-child pseudo-class

Dimensional adjustments for Semantic-ui dropdowns

PHP not compatible with Fancybox iframe

How do I create a clean HTML file when using the email editor with TinyMCE?

Storing a selected database column as a variable from an HTML page in Node.js with Express

changing size when hovered over with the mouse is not consistent between entering and exiting

How can I make a row div taller?

How to avoid clipping in Bootstrap 4 when a row overflows with horizontal scrolling