How to format numbers with commas using JavaScript?
-3
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>javascript
edited Dec 2 '18 at 22:11
halfer
14.7k759116
asked Nov 16 '18 at 8:20
manish thakurmanish thakur
16713
|
show 6 more comments
-3
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>javascript
edited Dec 2 '18 at 22:11
halfer
14.7k759116
asked Nov 16 '18 at 8:20
manish thakurmanish thakur
16713
1
Possible duplicate of How to print a number with commas as thousands separators in JavaScript
– Jack Bashford
Nov 16 '18 at 8: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 8:25
1
Are you sure you want this output:1,23,456? Normal formatting with thousands separators would yield123,456.
– Robby Cornelissen
Nov 16 '18 at 8:26
@RobbyCornelissen there is no problem in like 123,456 i am just expecting the india currency format
– manish thakur
Nov 16 '18 at 8:28
1
Number(123456).toLocaleString('en-IN')
– Robby Cornelissen
Nov 16 '18 at 8:30
|
show 6 more comments
-3
-3
-3
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>javascript
edited Dec 2 '18 at 22:11
halfer
14.7k759116
asked Nov 16 '18 at 8:20
manish thakurmanish thakur
16713
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>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>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>javascript
javascript
edited Dec 2 '18 at 22:11
halfer
14.7k759116
asked Nov 16 '18 at 8:20
manish thakurmanish thakur
16713
edited Dec 2 '18 at 22:11
halfer
14.7k759116
asked Nov 16 '18 at 8:20
manish thakurmanish thakur
16713
edited Dec 2 '18 at 22:11
halfer
14.7k759116
edited Dec 2 '18 at 22:11
halfer
14.7k759116
edited Dec 2 '18 at 22:11
halfer
14.7k759116
14.7k759116
asked Nov 16 '18 at 8:20
manish thakurmanish thakur
16713
asked Nov 16 '18 at 8:20
manish thakurmanish thakur
16713
asked Nov 16 '18 at 8:20
manish thakurmanish thakur
16713
16713
1
Possible duplicate of How to print a number with commas as thousands separators in JavaScript
– Jack Bashford
Nov 16 '18 at 8: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 8:25
1
Are you sure you want this output:1,23,456? Normal formatting with thousands separators would yield123,456.
– Robby Cornelissen
Nov 16 '18 at 8:26
@RobbyCornelissen there is no problem in like 123,456 i am just expecting the india currency format
– manish thakur
Nov 16 '18 at 8:28
1
Number(123456).toLocaleString('en-IN')
– Robby Cornelissen
Nov 16 '18 at 8:30
|
show 6 more comments
1
Possible duplicate of How to print a number with commas as thousands separators in JavaScript
– Jack Bashford
Nov 16 '18 at 8: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 8:25
1
Are you sure you want this output:1,23,456? Normal formatting with thousands separators would yield123,456.
– Robby Cornelissen
Nov 16 '18 at 8:26
@RobbyCornelissen there is no problem in like 123,456 i am just expecting the india currency format
– manish thakur
Nov 16 '18 at 8:28
1
Number(123456).toLocaleString('en-IN')
– Robby Cornelissen
Nov 16 '18 at 8:30
1
1
Possible duplicate of How to print a number with commas as thousands separators in JavaScript
– Jack Bashford
Nov 16 '18 at 8:23
Possible duplicate of How to print a number with commas as thousands separators in JavaScript
– Jack Bashford
Nov 16 '18 at 8: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 8:25
@JackBashford that is different they have defining the values by own here i am getting it in json
– manish thakur
Nov 16 '18 at 8:25
1
1
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 8:26
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 8:26
@RobbyCornelissen there is no problem in like 123,456 i am just expecting the india currency format
– manish thakur
Nov 16 '18 at 8:28
@RobbyCornelissen there is no problem in like 123,456 i am just expecting the india currency format
– manish thakur
Nov 16 '18 at 8:28
1
1
Number(123456).toLocaleString('en-IN')– Robby Cornelissen
Nov 16 '18 at 8:30
Number(123456).toLocaleString('en-IN')– Robby Cornelissen
Nov 16 '18 at 8:30
|
show 6 more comments
2 Answers
2
active
oldest
votes
2
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 2 '18 at 22:12
halfer
14.7k759116
answered Nov 16 '18 at 8:30
Zainul AbideenZainul Abideen
1,204318
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 8: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 8:44
in my code my totals are = grandTotal,completeTotal and outletandCounterWiseCompleteTotal[d][i]
– manish thakur
Nov 16 '18 at 9:15
i got yor point
– manish thakur
Nov 16 '18 at 9:19
hey its converting into US format i want it to be indian format
– manish thakur
Nov 16 '18 at 9:23
add a comment |
0
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);answered Nov 16 '18 at 8:53
Nick ParsonsNick Parsons
10.2k2926
can you edit it to my code my totals are = grandTotal,completeTotal and outletandCounterWiseCompleteTotal[d][i]
– manish thakur
Nov 16 '18 at 9:16
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53333930%2fhow-to-format-numbers-with-commas-using-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
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 2 '18 at 22:12
halfer
14.7k759116
answered Nov 16 '18 at 8:30
Zainul AbideenZainul Abideen
1,204318
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 8: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 8:44
in my code my totals are = grandTotal,completeTotal and outletandCounterWiseCompleteTotal[d][i]
– manish thakur
Nov 16 '18 at 9:15
i got yor point
– manish thakur
Nov 16 '18 at 9:19
hey its converting into US format i want it to be indian format
– manish thakur
Nov 16 '18 at 9:23
add a comment |
2
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 2 '18 at 22:12
halfer
14.7k759116
answered Nov 16 '18 at 8:30
Zainul AbideenZainul Abideen
1,204318
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 8: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 8:44
in my code my totals are = grandTotal,completeTotal and outletandCounterWiseCompleteTotal[d][i]
– manish thakur
Nov 16 '18 at 9:15
i got yor point
– manish thakur
Nov 16 '18 at 9:19
hey its converting into US format i want it to be indian format
– manish thakur
Nov 16 '18 at 9:23
add a comment |
2
2
2
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 2 '18 at 22:12
halfer
14.7k759116
answered Nov 16 '18 at 8:30
Zainul AbideenZainul Abideen
1,204318
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));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));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 2 '18 at 22:12
halfer
14.7k759116
answered Nov 16 '18 at 8:30
Zainul AbideenZainul Abideen
1,204318
edited Dec 2 '18 at 22:12
halfer
14.7k759116
edited Dec 2 '18 at 22:12
halfer
14.7k759116
edited Dec 2 '18 at 22:12
halfer
14.7k759116
14.7k759116
answered Nov 16 '18 at 8:30
Zainul AbideenZainul Abideen
1,204318
answered Nov 16 '18 at 8:30
Zainul AbideenZainul Abideen
1,204318
answered Nov 16 '18 at 8:30
Zainul AbideenZainul Abideen
1,204318
1,204318
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 8: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 8:44
in my code my totals are = grandTotal,completeTotal and outletandCounterWiseCompleteTotal[d][i]
– manish thakur
Nov 16 '18 at 9:15
i got yor point
– manish thakur
Nov 16 '18 at 9:19
hey its converting into US format i want it to be indian format
– manish thakur
Nov 16 '18 at 9:23
add a comment |
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 8: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 8:44
in my code my totals are = grandTotal,completeTotal and outletandCounterWiseCompleteTotal[d][i]
– manish thakur
Nov 16 '18 at 9:15
i got yor point
– manish thakur
Nov 16 '18 at 9:19
hey its converting into US format i want it to be indian format
– manish thakur
Nov 16 '18 at 9:23
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 8:32
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 8:32
1
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 8:44
@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 8:44
in my code my totals are = grandTotal,completeTotal and outletandCounterWiseCompleteTotal[d][i]
– manish thakur
Nov 16 '18 at 9:15
in my code my totals are = grandTotal,completeTotal and outletandCounterWiseCompleteTotal[d][i]
– manish thakur
Nov 16 '18 at 9:15
i got yor point
– manish thakur
Nov 16 '18 at 9:19
i got yor point
– manish thakur
Nov 16 '18 at 9:19
hey its converting into US format i want it to be indian format
– manish thakur
Nov 16 '18 at 9:23
hey its converting into US format i want it to be indian format
– manish thakur
Nov 16 '18 at 9:23
add a comment |
0
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);answered Nov 16 '18 at 8:53
Nick ParsonsNick Parsons
10.2k2926
can you edit it to my code my totals are = grandTotal,completeTotal and outletandCounterWiseCompleteTotal[d][i]
– manish thakur
Nov 16 '18 at 9:16
add a comment |
0
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);answered Nov 16 '18 at 8:53
Nick ParsonsNick Parsons
10.2k2926
can you edit it to my code my totals are = grandTotal,completeTotal and outletandCounterWiseCompleteTotal[d][i]
– manish thakur
Nov 16 '18 at 9:16
add a comment |
0
0
0
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);answered Nov 16 '18 at 8:53
Nick ParsonsNick Parsons
10.2k2926
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);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);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);answered Nov 16 '18 at 8:53
Nick ParsonsNick Parsons
10.2k2926
answered Nov 16 '18 at 8:53
Nick ParsonsNick Parsons
10.2k2926
answered Nov 16 '18 at 8:53
Nick ParsonsNick Parsons
10.2k2926
answered Nov 16 '18 at 8:53
Nick ParsonsNick Parsons
10.2k2926
10.2k2926
can you edit it to my code my totals are = grandTotal,completeTotal and outletandCounterWiseCompleteTotal[d][i]
– manish thakur
Nov 16 '18 at 9:16
add a comment |
can you edit it to my code my totals are = grandTotal,completeTotal and outletandCounterWiseCompleteTotal[d][i]
– manish thakur
Nov 16 '18 at 9:16
can you edit it to my code my totals are = grandTotal,completeTotal and outletandCounterWiseCompleteTotal[d][i]
– manish thakur
Nov 16 '18 at 9:16
can you edit it to my code my totals are = grandTotal,completeTotal and outletandCounterWiseCompleteTotal[d][i]
– manish thakur
Nov 16 '18 at 9:16
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53333930%2fhow-to-format-numbers-with-commas-using-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Possible duplicate of How to print a number with commas as thousands separators in JavaScript
– Jack Bashford
Nov 16 '18 at 8: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 8:25
1
Are you sure you want this output:
1,23,456? Normal formatting with thousands separators would yield123,456.– Robby Cornelissen
Nov 16 '18 at 8:26
@RobbyCornelissen there is no problem in like 123,456 i am just expecting the india currency format
– manish thakur
Nov 16 '18 at 8:28
1
Number(123456).toLocaleString('en-IN')– Robby Cornelissen
Nov 16 '18 at 8:30