How to format numbers with commas using JavaScript?

Question

I have an HTML table which have some data into it as a number. What I want to do is to format the numbers; currently I have 123456 and I want it format like 1,23,456.

I have tried with Java in my back end with Java number format but in my query I am using round(sum(amount)) so not able to get that format on UI because I am manipulating the json with JavaScript only. I want to achieve this by JavaScript.

Here is my code

 data= [
  {
    "amount": 291589,
    "billdate": "2018-08-01",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 58337,
    "billdate": "2018-08-01",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 65970,
    "billdate": "2018-08-01",
    "outlet": "KOLAR"
  },
  {
    "amount": 296125,
    "billdate": "2018-08-02",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 56545,
    "billdate": "2018-08-02",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 72213,
    "billdate": "2018-08-02",
    "outlet": "KOLAR"
  },
  {
    "amount": 346605,
    "billdate": "2018-08-03",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 62459,
    "billdate": "2018-08-03",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 65248,
    "billdate": "2018-08-03",
    "outlet": "KOLAR"
  },
  {
    "amount": 518212,
    "billdate": "2018-08-04",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 104801,
    "billdate": "2018-08-04",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 138151,
    "billdate": "2018-08-04",
    "outlet": "KOLAR"
  },
  {
    "amount": 628358,
    "billdate": "2018-08-05",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 115223,
    "billdate": "2018-08-05",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 134107,
    "billdate": "2018-08-05",
    "outlet": "KOLAR"
  },
  {
    "amount": 177866,
    "billdate": "2018-08-06",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 66095,
    "billdate": "2018-08-06",
    "outlet": "KOLAR"
  },
  {
    "amount": 284069,
    "billdate": "2018-08-07",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 58789,
    "billdate": "2018-08-07",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 67886,
    "billdate": "2018-08-07",
    "outlet": "KOLAR"
  },
  {
    "amount": 313128,
    "billdate": "2018-08-08",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 59939,
    "billdate": "2018-08-08",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 68558,
    "billdate": "2018-08-08",
    "outlet": "KOLAR"
  }
]

let formatData = function (data) {

                let billdates = [];
                let outlets = [];
                data.forEach(element => {
                    if (billdates.indexOf(element.billdate) == -1) {
                        billdates.push(element.billdate);
                    }
                    if (outlets.indexOf(element.outlet) == -1) {
                        outlets.push(element.outlet);
                    }
                });
                return {
                    data: data,
                    billdates: billdates,
                    outlets: outlets,

                };
            };



            let renderTable = function (data) {
                billdates = data.billdates;
                outlets = data.outlets;
                data = data.data;
                let tbl = document.getElementById("tbl");
                let table = document.createElement("table");
                let thead = document.createElement("thead");
                let headerRow = document.createElement("tr");
                let th = document.createElement("th");
                th.innerHTML = "Bill___Date";
                th.classList.add("text-center");
                headerRow.appendChild(th);
                let grandTotal = 0;
                let outletWiseTotal = {};
                th = document.createElement("th");
                th.innerHTML = "Total";
               th.classList.add("text-center");
                headerRow.appendChild(th);
                outlets.forEach(element => {
                    th = document.createElement("th");
                    th.innerHTML = element;
                   th.classList.add("text-center");
                    headerRow.appendChild(th);
                    outletWiseTotal[element] = 0;
                    data.forEach(el => {
                        if (el.outlet == element) {
                            outletWiseTotal[element] += parseInt(el.amount);
                        }
                    });
                    grandTotal += outletWiseTotal[element];
                });

                thead.appendChild(headerRow);
                headerRow = document.createElement("tr");
                th = document.createElement("th");
                th.innerHTML = "Total";
              th.classList.add("text-center");

                headerRow.appendChild(th);

                outlets.forEach(element => {
                    th = document.createElement("th");
                    th.innerHTML = outletWiseTotal[element];
                    th.classList.add("text-right");   //ol totals
                    headerRow.appendChild(th);
                });
                th = document.createElement("th");
                th.innerHTML = grandTotal;
                 th.classList.add("text-right");  // grand total
         /*  console.log(grandTotal);*/
               // headerRow.appendChild(th);
           headerRow.insertBefore(th , headerRow.children[1] );
                thead.appendChild(headerRow);
                table.appendChild(thead);

                let tbody = document.createElement("tbody");


                billdates.forEach(element => {
                    let row = document.createElement("tr");  
                    td = document.createElement("td");
                    td.innerHTML = element;
                    row.appendChild(td);
                    let total = 0;
                    outlets.forEach(outlet => {
                        let el = 0;
                        data.forEach(d => {
                            if (d.billdate == element && d.outlet == outlet) {
                                total += parseInt(d.amount);
                                el = d.amount;
                            }
                        });
                        td = document.createElement("td");
                        td.innerHTML = el;
                        td.classList.add("text-right"); //oldata
                        row.appendChild(td);
                    });
                    /*console.log("row is : " , row.children )*/
                    td = document.createElement("td");
                    td.innerHTML = total;
                    td.classList.add("text-right"); //column total
                   // row.appendChild(td);
                    row.insertBefore(td , row.children[1] );
                    tbody.appendChild(row);
                });

                table.appendChild(tbody);

                tbl.innerHTML = "";
                tbl.appendChild(table);
                table.classList.add("table");
                table.classList.add("table-striped");
                table.classList.add("table-bordered");
            }
            let formatedData = formatData(data);
            renderTable(formatedData);

data= [
  {
    "amount": 291589,
    "billdate": "2018-08-01",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 58337,
    "billdate": "2018-08-01",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 65970,
    "billdate": "2018-08-01",
    "outlet": "KOLAR"
  },
  {
    "amount": 296125,
    "billdate": "2018-08-02",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 56545,
    "billdate": "2018-08-02",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 72213,
    "billdate": "2018-08-02",
    "outlet": "KOLAR"
  },
  {
    "amount": 346605,
    "billdate": "2018-08-03",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 62459,
    "billdate": "2018-08-03",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 65248,
    "billdate": "2018-08-03",
    "outlet": "KOLAR"
  },
  {
    "amount": 518212,
    "billdate": "2018-08-04",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 104801,
    "billdate": "2018-08-04",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 138151,
    "billdate": "2018-08-04",
    "outlet": "KOLAR"
  },
  {
    "amount": 628358,
    "billdate": "2018-08-05",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 115223,
    "billdate": "2018-08-05",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 134107,
    "billdate": "2018-08-05",
    "outlet": "KOLAR"
  },
  {
    "amount": 177866,
    "billdate": "2018-08-06",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 66095,
    "billdate": "2018-08-06",
    "outlet": "KOLAR"
  },
  {
    "amount": 284069,
    "billdate": "2018-08-07",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 58789,
    "billdate": "2018-08-07",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 67886,
    "billdate": "2018-08-07",
    "outlet": "KOLAR"
  },
  {
    "amount": 313128,
    "billdate": "2018-08-08",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 59939,
    "billdate": "2018-08-08",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 68558,
    "billdate": "2018-08-08",
    "outlet": "KOLAR"
  }
]

let formatData = function (data) {

             let billdates = [];
             let outlets = [];
             data.forEach(element => {
                 if (billdates.indexOf(element.billdate) == -1) {
                     billdates.push(element.billdate);
                 }
                 if (outlets.indexOf(element.outlet) == -1) {
                     outlets.push(element.outlet);
                 }
             });
             return {
                 data: data,
                 billdates: billdates,
                 outlets: outlets,
                 
             };
         };

  

         let renderTable = function (data) {
             billdates = data.billdates;
             outlets = data.outlets;
             data = data.data;
             let tbl = document.getElementById("tbl");
             let table = document.createElement("table");
             let thead = document.createElement("thead");
             let headerRow = document.createElement("tr");
             let th = document.createElement("th");
             th.innerHTML = "Bill___Date";
                th.classList.add("text-center");
             headerRow.appendChild(th);
             let grandTotal = 0;
             let outletWiseTotal = {};
             th = document.createElement("th");
             th.innerHTML = "Total";
               th.classList.add("text-center");
             headerRow.appendChild(th);
             outlets.forEach(element => {
                 th = document.createElement("th");
                 th.innerHTML = element;
                   th.classList.add("text-center");
                 headerRow.appendChild(th);
                 outletWiseTotal[element] = 0;
                 data.forEach(el => {
                     if (el.outlet == element) {
                         outletWiseTotal[element] += parseInt(el.amount);
                     }
                 });
                 grandTotal += outletWiseTotal[element];
             });
             
             thead.appendChild(headerRow);
             headerRow = document.createElement("tr");
             th = document.createElement("th");
             th.innerHTML = "Total";
              th.classList.add("text-center");
               
             headerRow.appendChild(th);

             outlets.forEach(element => {
                 th = document.createElement("th");
                 th.innerHTML = outletWiseTotal[element];
                    th.classList.add("text-right");   //ol totals
                 headerRow.appendChild(th);
             });
             th = document.createElement("th");
             th.innerHTML = grandTotal;
                 th.classList.add("text-right");  // grand total
         /*  console.log(grandTotal);*/
            // headerRow.appendChild(th);
           headerRow.insertBefore(th , headerRow.children[1] );
             thead.appendChild(headerRow);
             table.appendChild(thead);

             let tbody = document.createElement("tbody");

             
             billdates.forEach(element => {
              let row = document.createElement("tr");  
                 td = document.createElement("td");
                 td.innerHTML = element;
                 row.appendChild(td);
                 let total = 0;
                 outlets.forEach(outlet => {
                     let el = 0;
                     data.forEach(d => {
                         if (d.billdate == element && d.outlet == outlet) {
                             total += parseInt(d.amount);
                             el = d.amount;
                         }
                     });
                     td = document.createElement("td");
                     td.innerHTML = el;
                        td.classList.add("text-right"); //oldata
                     row.appendChild(td);
                 });
     /*console.log("row is : " , row.children )*/
                 td = document.createElement("td");
                 td.innerHTML = total;
                    td.classList.add("text-right"); //column total
                // row.appendChild(td);
     row.insertBefore(td , row.children[1] );
                 tbody.appendChild(row);
             });

             table.appendChild(tbody);

             tbl.innerHTML = "";
             tbl.appendChild(table);
             table.classList.add("table");
             table.classList.add("table-striped");
             table.classList.add("table-bordered");
         }
            let formatedData = formatData(data);
            renderTable(formatedData);

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet"
 href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
  <div id="tbl"></div>
</body>
</html>

Possible duplicate of [How to print a number with commas as thousands separators in JavaScript](https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript) — Jack Bashford, Nov 16 '18 at 08:23
@JackBashford that is different they have defining the values by own here i am getting it in json — manish thakur, Nov 16 '18 at 08:25
Are you sure you want this output: `1,23,456`? Normal formatting with thousands separators would yield `123,456`. — Robby Cornelissen, Nov 16 '18 at 08:26
@RobbyCornelissen there is no problem in like 123,456 i am just expecting the india currency format — manish thakur, Nov 16 '18 at 08:28
@RobbyCornelissen if i get in thousand separator there is no issue — manish thakur, Nov 16 '18 at 08:29
@RobbyCornelissen where i have to put this into my code i am confuse there only — manish thakur, Nov 16 '18 at 08:31
Possible duplicate of [Displaying a number in Indian format using Javascript](https://stackoverflow.com/questions/16037165/displaying-a-number-in-indian-format-using-javascript) — Robby Cornelissen, Nov 16 '18 at 08:33
Wherever you're displaying amounts. Is it up to us to go through all of your code and point out the line numbers where you're trying to print out amounts? — Robby Cornelissen, Nov 16 '18 at 08:35
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/183765/discussion-between-manish-thakur-and-robby-cornelissen). — manish thakur, Nov 16 '18 at 08:35

score 1 · Accepted Answer · edited Dec 02 '18 at 22:12

1

You can use this function to format your number:

let numberFormat = (str) => str.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

ES5:

function numberFormat(str){
    return str.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

Working example:

let num = 54321678;
let num2 = 123456;
let numberFormat = (num) => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
console.log(numberFormat(num));
console.log(numberFormat(num2));

edited Dec 02 '18 at 22:12

halfer

19,824
17
99
186

answered Nov 16 '18 at 08:30

Zainul Abideen

1,829
15
37

can you edit it into my code actually i am new to JS and don't know the full syntax ...so it will be helpful if you edit my snippet – manish thakur Nov 16 '18 at 08:32
1

@manishthakur I've added an example. You can edit your code on your own. just define a function and call it wherever you want and pass the number – Zainul Abideen Nov 16 '18 at 08:44
in my code my totals are = grandTotal,completeTotal and outletandCounterWiseCompleteTotal[d][i] – manish thakur Nov 16 '18 at 09:15
hey its converting into US format i want it to be indian format – manish thakur Nov 16 '18 at 09:23

score 0 · Answer 2 · answered Nov 16 '18 at 08:53

You can use number.toLocaleString() to convert your integer to a comma-separated integer (as a string data type). You can then use .map to change your array's objects to have the property of amount set to their comma-separated value (as a string).

Take a look at the snippet below for a working example:

let data = [{"amount":291589,"billdate":"2018-08-01","outlet":"JAYANAGAR"},{"amount":58337,"billdate":"2018-08-01","outlet":"MALLESHWARAM"},{"amount":65970,"billdate":"2018-08-01","outlet":"KOLAR"},{"amount":296125,"billdate":"2018-08-02","outlet":"JAYANAGAR"},{"amount":56545,"billdate":"2018-08-02","outlet":"MALLESHWARAM"},{"amount":72213,"billdate":"2018-08-02","outlet":"KOLAR"},{"amount":346605,"billdate":"2018-08-03","outlet":"JAYANAGAR"},{"amount":62459,"billdate":"2018-08-03","outlet":"MALLESHWARAM"},{"amount":65248,"billdate":"2018-08-03","outlet":"KOLAR"},{"amount":518212,"billdate":"2018-08-04","outlet":"JAYANAGAR"},{"amount":104801,"billdate":"2018-08-04","outlet":"MALLESHWARAM"},{"amount":138151,"billdate":"2018-08-04","outlet":"KOLAR"},{"amount":628358,"billdate":"2018-08-05","outlet":"JAYANAGAR"},{"amount":115223,"billdate":"2018-08-05","outlet":"MALLESHWARAM"},{"amount":134107,"billdate":"2018-08-05","outlet":"KOLAR"},{"amount":177866,"billdate":"2018-08-06","outlet":"JAYANAGAR"},{"amount":66095,"billdate":"2018-08-06","outlet":"KOLAR"},{"amount":284069,"billdate":"2018-08-07","outlet":"JAYANAGAR"},{"amount":58789,"billdate":"2018-08-07","outlet":"MALLESHWARAM"},{"amount":67886,"billdate":"2018-08-07","outlet":"KOLAR"},{"amount":313128,"billdate":"2018-08-08","outlet":"JAYANAGAR"},{"amount":59939,"billdate":"2018-08-08","outlet":"MALLESHWARAM"},{"amount":68558,"billdate":"2018-08-08","outlet":"KOLAR"}];

const res = data.map(({amount, ...rem}) => ({amount: amount.toLocaleString(), ...rem}));
console.log(res);

can you edit it to my code my totals are = grandTotal,completeTotal and outletandCounterWiseCompleteTotal[d][i] — manish thakur, Nov 16 '18 at 09:16

How to format numbers with commas using JavaScript?

2 Answers2