1

Today I'm facing a really weird issue. I'm working at a simple project to display some data in a table with billing information provided by a REST-API. Because of the missing backend I backed up on a random generated array. That's working pretty perfect and everything just looks fine. BUT... one small thing seems like witchcraft, I simply want to sum up every billing to display the total amount on top of the table, but Typescript seems to have a really really weird way of handling float/int/string type conversion, I think. Here is a small Pic of my console log, it displays the row object and the sum.

enter image description here

I want to sum up every value and for gods sake I don't know how Typescript is adding up 3876.61 plus 8.03 to 3884.6400000000003, but... how can I get rid of that? Is rounding the only possible solution?

pjs
  • 18,696
  • 4
  • 27
  • 56
TinoZ
  • 560
  • 1
  • 5
  • 17
  • 1
    Yeah, this is javascript rounding error, I didn't quite grasp the technical explanation but here's the issue https://stackoverflow.com/questions/1458633/how-to-deal-with-floating-point-number-precision-in-javascript When it comes to Angular, I usually just use the decimal pipe to make sure everything is rounded to whatever feasible decimal point. – Aleksi Feb 08 '22 at 13:27
  • 1
    Always use integers for monetary amounts (write amounts in cents). It is impossible to write every possible float numbers in binary (because even between 0 and 1, there is an infinity of float numbers). So, choices were made for the representation of float numbers and this implies some cons, like the fact that operations on float numbers are always partly wrong. – Arnaud Denoyelle Feb 08 '22 at 13:40
  • 1
    Your backend should under no circumstances store or return float values for currency. ALWAYS use "cents", i.e. 100 = $1 (Arnaud explained it beautifully, got there just before I did :p) – Will Alexander Feb 08 '22 at 13:40
  • 1
    Does this answer your question? [How to deal with floating point number precision in JavaScript?](https://stackoverflow.com/questions/1458633/how-to-deal-with-floating-point-number-precision-in-javascript) – Arnaud Denoyelle Feb 08 '22 at 13:41
  • @WillAlexander you are totally right, but i have no control about the backend, so i have to deal with the given data as is.... – TinoZ Feb 08 '22 at 13:58

1 Answers1

1

Like Aleksi said, using | number pipe takes care of it.

number1: {{number1}} + number2 {{number2}} = {{number1 + number2 | number }}

number1: 3876.61 + number2 8.03 = 3,884.64

https://stackblitz.com/edit/angular-ivy-kf8hct?file=src%2Fapp%2Fapp.component.html

Joosep Parts
  • 5,372
  • 2
  • 8
  • 33
  • well, it kinda does. but i sum up a large amount in backing code, so its easier to do so directly after processing the api response – TinoZ Feb 08 '22 at 13:56
  • As usual in Angular, you can also rely on dependency injection constructing the decimalPipe and calling `transform()` on it. – Joosep Parts Feb 08 '22 at 13:59
  • right, thats one way. in the end it will be a simple mix. just played around, my solution will be to multiply every single value with 100, so it eliminates every decimal – TinoZ Feb 08 '22 at 14:07
  • I'm afraid that won't always work either. I think your best bet is to treat each number as a string and remove all "." and "," – Will Alexander Feb 08 '22 at 14:47