display numeric data as money with comma on jQuery array loop

Question

Any way to display numeric money data with comma e.g. $44,721.90 ? (without plugins as jquery-mask preferred)

Thanks in advance.

var name1 = {
  name: "John",
  money: 44721.90
};
var name2 = {
  name: "Mayer",
  money: 16715.79
};

var names = [name1, name2];
   
function show() {
  for (var i = 0; i < names.length; i++) {
    $(".money").append('<span class="name">' + names[i].name + ' </span><span class="budget"> $' + names[i].money + '</span><br>');
  }
}

show();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="money"></div>

Possible duplicate of [How can I correctly format currency using jquery?](http://stackoverflow.com/questions/5043650/how-can-i-correctly-format-currency-using-jquery) — Tyler Roper, Nov 14 '16 at 21:37

score 0 · Answer 1 · answered Nov 14 '16 at 21:56

This can help

function formatee(num) {
    var dec = "";
    var result = "";
    if(num != parseInt(num)) {
        // get decimal part if exist
        dec = "." + (num+'').replace(/\d+\./, ''); 
    }
    num = parseInt(num);
    while(num > 1000) {
        result = leadZero(num%1000) + (result ? ',' : '') + result;
        num = parseInt(num/1000);
    }
    result = num + (result ? ',' : '') + result + dec;
    return result;
}
function leadZero(numb) {
    return (numb < 100 ? '0':'') + (numb < 10 ? '0':'') + numb;
}

score 0 · Accepted Answer · answered Nov 15 '16 at 04:35

You can use ES6's number format method (see here):

DEMO BELOW:

var name1 = {
    name: "John",
    money: 44721.90
};
var name2 = {
    name: "Mayer",
    money: 16715.79
};

var names = [name1, name2];

function show() {
    var numFormat = new Intl.NumberFormat("en-US");
    for (var i = 0; i < names.length; i++) {
        $(".money").append('<span class="name">' + names[i].name + ' </span><span class="budget"> $' + numFormat.format(names[i].money) + '</span><br>');
    }
}

show();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="money"></div>

You can also use it's Currency formatting by passing a style property in the number format (see here):

DEMO BELOW:

var name1 = {
    name: "John",
    money: 44721.90
};
var name2 = {
    name: "Mayer",
    money: 16715.79
};

var names = [name1, name2];

function show() {
    var numFormat = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
    for (var i = 0; i < names.length; i++) {
        $(".money").append('<span class="name">' + names[i].name + ' </span><span class="budget">' + numFormat.format(names[i].money) + '</span><br>');
    }
}

show();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="money"></div>

display numeric data as money with comma on jQuery array loop

2 Answers2