Format number with thousands seperator and 2 decimal places

Question

I'm currently populating a div with jquery but need to format the output with a thousands separator and to two decimal places whilst also keeping the output as a number.

FYI I'm currently populating the div using:

var prev_count = 120;
var new_count = 20.50;

    var count_till = prev_count < new_count ? new_count : new_count - 1;
    jQuery({ Counter: prev_count }).animate({ Counter: count_till }, {
        duration: 600,
        easing: 'swing',
        step: function () {
            jQuery("#count_div").text(Math.ceil(this.Counter));
        }
    });

Starting variable is 120 and this is meant to count down to 20.50 however it ends on 20, not 20.50, is this possible if so how would i go about it?

Here is my jsfiddle

Than from where does this `{Counter: prev_count}` and `this.Counter` comes? — Justinas, Jan 09 '17 at 10:50
At the moment they are just static variables but they will be refreshed based on new values fed in through a post request. — user1419810, Jan 09 '17 at 11:00
Use a number formatting library. It's a waste of everyone's time to roll your own number formatting code when battle-tested code that solves your problem is freely available. — Tomalak, Jan 09 '17 at 12:14
A quick search for "javascript number format library" reveals quite a few promising candidates, pick one that you find easy to use. — Tomalak, Jan 09 '17 at 12:19
I have no idea what you are talking about. Library recommendations are off topic on SO (I'm not making this up). I'm sorry that you are unhappy with SO, but I don't think that you should let it out on me. — Tomalak, Jan 09 '17 at 12:24
But you recommended that i try "battle tested" code, surely that comes with some opinion or experience of using one, otherwise how do i know which ones are "battle tested"? — user1419810, Jan 09 '17 at 12:26
In fact I believe "answers that recommend libraries as a solution to a problem can be on-topic"as quoted from here...http://meta.stackoverflow.com/questions/289843/can-i-ask-for-code-libraries-and-plugins-on-stack-overflow-or-is-that-better-su — user1419810, Jan 09 '17 at 12:28
The ones that are active on github. The ones that have a full suite of tests, a spec and a documentation website that explains all the functions and options they offer, the ones that appear to have solid internationalization options or extensibility points. Those are the ones you should be looking for. — Tomalak, Jan 09 '17 at 12:30
Alternatively, pick any one that solves your immediate problem and roll with it. I don't see why it would be my task to make a recommendation, you know what you need better than I do. That's a big part of the reason why recommendations are off-topic here. Another big part is that recommendations are inherently subjective and become outdated fairly quickly. The relevant meta post for this is [this one](http://meta.stackoverflow.com/questions/251134/where-can-i-ask-about-finding-a-tool-library-or-favorite-off-site-resource), not the one you were citing (and even that says they are OT) — Tomalak, Jan 09 '17 at 12:40
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/132698/discussion-between-user1419810-and-tomalak). — user1419810, Jan 09 '17 at 12:44

zerohero · Accepted Answer · 2017-01-09T13:51:20.807

1

Math.Ceil returns the smallest integer greater than or equal to a given number. Integers do not have fractions (which is what you are looking for)

You would need to replace your line where you output the number to this:

jQuery("#count_div").html(this.Counter.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'));

Here is a working JSFiddle: https://jsfiddle.net/12g2pj4L/2/

edited Jan 09 '17 at 13:51

answered Jan 09 '17 at 13:42

zerohero

593
4
15

But I always want the answer to 2 decimals, wouldn't this only reach one decimal if say 20.5 was used as the target? – user1419810 Jan 09 '17 at 13:50

score 0 · Answer 2 · answered Jan 09 '17 at 13:33

Ok, so I managed to solve this myself using a function to add in the thousands separator and also toFixed(2) to set the decimal places, code as below:

$.fn.digits = function(){ 
    return this.each(function(){ 
        $(this).text( $(this).text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") ); 
    })
}

var prev_count = "1125";
prev_count = prev_count.split(',').join('');
prev_count = parseInt(prev_count);

var new_count = 1320.50;

var count_till = prev_count < new_count ? new_count : new_count;
jQuery({ Counter: prev_count }).animate({ Counter: count_till }, {
    duration: 7000,
    easing: 'swing',
    step: function () {
    jQuery("#count_div").html(this.Counter.toFixed(2)).digits();

    }
});

and fiddle here

Why `var count_till = prev_count < new_count ? new_count : new_count;`? That is the equivalent of plain on, non-conditional assignment, `var count_till = new_count`. — ProfK, Nov 11 '19 at 05:58

Format number with thousands seperator and 2 decimal places

2 Answers2