我有一个HTML页面，该页面显示JSON数据中的HTML表。我想用逗号分隔所有印度格式的数字。
我知道通过使用.toLocaleString('en-IN')可以实现所需的功能，但是应将其放在代码中的什么位置？我很困惑。
这是我的代码：
tableValue=[
{
"5": "4341",
"6": "12235",
"7": "37135",
"8": "53522",
"9": "43688",
"10": "39965",
"11": "32024",
"12": "49631",
"13": "84770",
"14": "107020",
"15": "60046",
"16": "50656",
"17": "63183",
"18": "63381",
"19": "59317",
"20": "49595",
"21": "28752",
"22": "1518",
"OUTLET": "",
"BILL___DATE": "TOTAL 1",
"TOTAL": "840779"
},
{
"5": "605",
"6": "6073",
"7": "8324",
"8": "15596",
"9": "13424",
"10": "15865",
"11": "12101",
"12": "16792",
"13": "31889",
"14": "39439",
"15": "19949",
"16": "17571",
"17": "21105",
"18": "20803",
"19": "22551",
"20": "19865",
"21": "9632",
"22": "5",
"OUTLET": "JAYANAGAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "291589"
},
{
"5": "3736",
"6": "5177",
"7": "10598",
"8": "12227",
"9": "12020",
"10": "12329",
"11": "11412",
"12": "20662",
"13": "32000",
"14": "37438",
"15": "21690",
"16": "18499",
"17": "23042",
"18": "22779",
"19": "19878",
"20": "16754",
"21": "14371",
"22": "1513",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "296125"
},
{
"5": "0",
"6": "0",
"7": "1281",
"8": "1451",
"9": "2285",
"10": "2013",
"11": "2917",
"12": "2965",
"13": "6437",
"14": "9538",
"15": "4269",
"16": "3579",
"17": "6257",
"18": "7031",
"19": "5187",
"20": "2667",
"21": "460",
"22": "0",
"OUTLET": "MALLESHWARAM",
"BILL___DATE": "2018-08-01",
"TOTAL": "58337"
},
{
"5": "0",
"6": "0",
"7": "1514",
"8": "577",
"9": "3150",
"10": "3106",
"11": "2758",
"12": "2891",
"13": "5344",
"14": "6653",
"15": "3921",
"16": "5171",
"17": "5953",
"18": "6143",
"19": "5959",
"20": "3255",
"21": "150",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "56545"
},
{
"5": "0",
"6": "341",
"7": "8838",
"8": "12335",
"9": "7872",
"10": "4370",
"11": "1829",
"12": "3348",
"13": "3502",
"14": "5581",
"15": "4231",
"16": "2524",
"17": "2236",
"18": "2008",
"19": "1796",
"20": "4870",
"21": "289",
"22": "0",
"OUTLET": "KOLAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "65970"
},
{
"5": "0",
"6": "644",
"7": "6580",
"8": "11336",
"9": "4937",
"10": "2282",
"11": "1007",
"12": "2973",
"13": "5598",
"14": "8371",
"15": "5986",
"16": "3312",
"17": "4590",
"18": "4617",
"19": "3946",
"20": "2184",
"21": "3850",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "72213"
}
]
function addTable(tableValue) {
var col = Object.keys(tableValue[0]); // get all the keys from first
var countNum = col.filter(i => !isNaN(i)).length; // count all which
// are number
var num = col.splice(0, countNum); // cut five elements from frist
col = col.concat(num); // shift the first item to last
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < tableValue.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = (tableValue[i][col[j]]);
if (j > 1)
tabCell.classList.add("text-right");
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("newTable");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
}
addTable(tableValue)
我应该在代码中的什么地方写.toLocaleString('en-IN')，用逗号分隔所有数字
tableValue=[
{
"5": "4341",
"6": "12235",
"7": "37135",
"8": "53522",
"9": "43688",
"10": "39965",
"11": "32024",
"12": "49631",
"13": "84770",
"14": "107020",
"15": "60046",
"16": "50656",
"17": "63183",
"18": "63381",
"19": "59317",
"20": "49595",
"21": "28752",
"22": "1518",
"OUTLET": "",
"BILL___DATE": "TOTAL 1",
"TOTAL": "840779"
},
{
"5": "605",
"6": "6073",
"7": "8324",
"8": "15596",
"9": "13424",
"10": "15865",
"11": "12101",
"12": "16792",
"13": "31889",
"14": "39439",
"15": "19949",
"16": "17571",
"17": "21105",
"18": "20803",
"19": "22551",
"20": "19865",
"21": "9632",
"22": "5",
"OUTLET": "JAYANAGAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "291589"
},
{
"5": "3736",
"6": "5177",
"7": "10598",
"8": "12227",
"9": "12020",
"10": "12329",
"11": "11412",
"12": "20662",
"13": "32000",
"14": "37438",
"15": "21690",
"16": "18499",
"17": "23042",
"18": "22779",
"19": "19878",
"20": "16754",
"21": "14371",
"22": "1513",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "296125"
},
{
"5": "0",
"6": "0",
"7": "1281",
"8": "1451",
"9": "2285",
"10": "2013",
"11": "2917",
"12": "2965",
"13": "6437",
"14": "9538",
"15": "4269",
"16": "3579",
"17": "6257",
"18": "7031",
"19": "5187",
"20": "2667",
"21": "460",
"22": "0",
"OUTLET": "MALLESHWARAM",
"BILL___DATE": "2018-08-01",
"TOTAL": "58337"
},
{
"5": "0",
"6": "0",
"7": "1514",
"8": "577",
"9": "3150",
"10": "3106",
"11": "2758",
"12": "2891",
"13": "5344",
"14": "6653",
"15": "3921",
"16": "5171",
"17": "5953",
"18": "6143",
"19": "5959",
"20": "3255",
"21": "150",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "56545"
},
{
"5": "0",
"6": "341",
"7": "8838",
"8": "12335",
"9": "7872",
"10": "4370",
"11": "1829",
"12": "3348",
"13": "3502",
"14": "5581",
"15": "4231",
"16": "2524",
"17": "2236",
"18": "2008",
"19": "1796",
"20": "4870",
"21": "289",
"22": "0",
"OUTLET": "KOLAR",
"BILL___DATE": "2018-08-01",
"TOTAL": "65970"
},
{
"5": "0",
"6": "644",
"7": "6580",
"8": "11336",
"9": "4937",
"10": "2282",
"11": "1007",
"12": "2973",
"13": "5598",
"14": "8371",
"15": "5986",
"16": "3312",
"17": "4590",
"18": "4617",
"19": "3946",
"20": "2184",
"21": "3850",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-08-02",
"TOTAL": "72213"
}
]
function addTable(tableValue) {
var col = Object.keys(tableValue[0]); // get all the keys from first
var countNum = col.filter(i => !isNaN(i)).length; // count all which
// are number
var num = col.splice(0, countNum); // cut five elements from frist
col = col.concat(num); // shift the first item to last
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < tableValue.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = (tableValue[i][col[j]]);
if (j > 1)
tabCell.classList.add("text-right");
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("newTable");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
}
addTable(tableValue)<!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>
<table id="newTable"></table>
</body>
</html>
答案 0 :(得分：2)
这里的内容并不会改变您已经拥有的太多代码。
正如我提到的，主要问题是您的字符串不是数字，因此您呼叫toLocaleString不会产生任何效果。
您可以先使用tableValue检查!isNaN是否为数字，然后再将其添加到值上，然后依次调用parseInt和toLocaleString。
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < tableValue.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
var val = tableValue[i][col[j]];
if(val && !isNaN(val)){
val = parseInt(val).toLocaleString('en-in')
}
tabCell.innerHTML = (val);
if (j > 1)
tabCell.classList.add("text-right");
}
免责声明由于我确定这不是完整的数据集，因此您的里程可能因此答案而异。您可能需要也可能不需要添加更复杂的检查。 要考虑的另一种选择是在某种验证和清除阶段中获取数据后立即执行所有这些操作。这样，您可以将呈现/显示逻辑与数据检查逻辑分离，以防您要修改的数据更多。您可以看到，如果您开始将所有这些填充到上面的一个循环中，则程序可能会变得复杂。
修改
具有建议修改的代码段：
tableValue = [{
"5": "4960",
"6": "38752",
"7": "137323",
"8": "183184",
"9": "180678",
"10": "181543",
"11": "127190",
"12": "131412",
"13": "256744",
"14": "387153",
"15": "234712",
"16": "182171",
"17": "190143",
"18": "209417",
"19": "196859",
"20": "194871",
"21": "130037",
"22": "17614",
"OUTLET": "",
"BILL___DATE": "TOTAL",
"TOTAL": "2984763"
},
{
"5": "2677",
"6": "5948",
"7": "10259",
"8": "17453",
"9": "21044",
"10": "21235",
"11": "19691",
"12": "22327",
"13": "37018",
"14": "51560",
"15": "68478",
"16": "33797",
"17": "32089",
"18": "29810",
"19": "32071",
"20": "30675",
"21": "34726",
"22": "5568",
"OUTLET": "JAYANAGAR",
"BILL___DATE": "2018-09-01",
"TOTAL": "476426"
},
{
"5": "132",
"6": "6251",
"7": "19551",
"8": "31286",
"9": "36486",
"10": "34866",
"11": "17343",
"12": "20845",
"13": "38726",
"14": "88845",
"15": "39685",
"16": "24593",
"17": "28852",
"18": "31652",
"19": "35708",
"20": "38314",
"21": "17373",
"22": "645",
"OUTLET": "",
"BILL___DATE": "2018-09-02",
"TOTAL": "511153"
},
{
"5": "0",
"6": "0",
"7": "2963",
"8": "11132",
"9": "8799",
"10": "8371",
"11": "8582",
"12": "11856",
"13": "23646",
"14": "11929",
"15": "11946",
"16": "12162",
"17": "13064",
"18": "12182",
"19": "16915",
"20": "12046",
"21": "1828",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-09-03",
"TOTAL": "167421"
},
{
"5": "988",
"6": "5361",
"7": "13765",
"8": "10278",
"9": "14426",
"10": "14739",
"11": "13559",
"12": "16443",
"13": "31829",
"14": "35478",
"15": "10231",
"16": "13290",
"17": "17278",
"18": "20462",
"19": "15580",
"20": "23984",
"21": "10403",
"22": "1618",
"OUTLET": "",
"BILL___DATE": "2018-09-04",
"TOTAL": "269712"
},
{
"5": "659",
"6": "11597",
"7": "20417",
"8": "24676",
"9": "28640",
"10": "25457",
"11": "20068",
"12": "10595",
"13": "32519",
"14": "69578",
"15": "25862",
"16": "26303",
"17": "22560",
"18": "19887",
"19": "26635",
"20": "20028",
"21": "22926",
"22": "1062",
"OUTLET": "",
"BILL___DATE": "2018-09-05",
"TOTAL": "409469"
},
{
"5": "504",
"6": "5286",
"7": "7664",
"8": "11072",
"9": "11693",
"10": "15295",
"11": "11732",
"12": "16562",
"13": "24380",
"14": "30616",
"15": "19539",
"16": "20807",
"17": "16820",
"18": "17946",
"19": "18433",
"20": "19136",
"21": "10892",
"22": "1069",
"OUTLET": "",
"BILL___DATE": "2018-09-06",
"TOTAL": "259446"
},
{
"5": "0",
"6": "0",
"7": "892",
"8": "2674",
"9": "5797",
"10": "4583",
"11": "3950",
"12": "4597",
"13": "9567",
"14": "11079",
"15": "8712",
"16": "4445",
"17": "7730",
"18": "11314",
"19": "8765",
"20": "6012",
"21": "2024",
"22": "0",
"OUTLET": "MALLESHWARAM",
"BILL___DATE": "2018-09-01",
"TOTAL": "92141"
},
{
"5": "0",
"6": "0",
"7": "1122",
"8": "3860",
"9": "6297",
"10": "10145",
"11": "5109",
"12": "4418",
"13": "9603",
"14": "11024",
"15": "9452",
"16": "5707",
"17": "9455",
"18": "11709",
"19": "11553",
"20": "12863",
"21": "3387",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-09-02",
"TOTAL": "115704"
},
{
"5": "0",
"6": "0",
"7": "1249",
"8": "1490",
"9": "2929",
"10": "3167",
"11": "2296",
"12": "1622",
"13": "5161",
"14": "6910",
"15": "5696",
"16": "4660",
"17": "6864",
"18": "8956",
"19": "4401",
"20": "2165",
"21": "1284",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-09-04",
"TOTAL": "58850"
},
{
"5": "0",
"6": "0",
"7": "2316",
"8": "5453",
"9": "8846",
"10": "4303",
"11": "6679",
"12": "2210",
"13": "5084",
"14": "5425",
"15": "3198",
"16": "6867",
"17": "7615",
"18": "12147",
"19": "6315",
"20": "3368",
"21": "608",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-09-05",
"TOTAL": "80434"
},
{
"5": "0",
"6": "0",
"7": "908",
"8": "2185",
"9": "2425",
"10": "3377",
"11": "4844",
"12": "1796",
"13": "6801",
"14": "9511",
"15": "3421",
"16": "7216",
"17": "4512",
"18": "5040",
"19": "4484",
"20": "3189",
"21": "1436",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-09-06",
"TOTAL": "61145"
},
{
"5": "0",
"6": "1122",
"7": "9605",
"8": "13939",
"9": "10278",
"10": "15947",
"11": "5077",
"12": "6046",
"13": "8112",
"14": "10164",
"15": "7366",
"16": "3414",
"17": "4136",
"18": "7295",
"19": "3052",
"20": "4656",
"21": "3525",
"22": "1579",
"OUTLET": "KOLAR",
"BILL___DATE": "2018-09-01",
"TOTAL": "115313"
},
{
"5": "0",
"6": "0",
"7": "12694",
"8": "11191",
"9": "5931",
"10": "9017",
"11": "1188",
"12": "2331",
"13": "7590",
"14": "7265",
"15": "5924",
"16": "5627",
"17": "3456",
"18": "5135",
"19": "1634",
"20": "2104",
"21": "2470",
"22": "40",
"OUTLET": "",
"BILL___DATE": "2018-09-02",
"TOTAL": "83597"
},
{
"5": "0",
"6": "966",
"7": "2207",
"8": "9208",
"9": "3125",
"10": "744",
"11": "2439",
"12": "198",
"13": "2605",
"14": "10346",
"15": "1634",
"16": "3985",
"17": "1211",
"18": "4821",
"19": "4428",
"20": "2118",
"21": "1113",
"22": "2627",
"OUTLET": "",
"BILL___DATE": "2018-09-03",
"TOTAL": "53775"
},
{
"5": "0",
"6": "781",
"7": "12997",
"8": "8874",
"9": "5186",
"10": "2634",
"11": "2279",
"12": "3773",
"13": "3085",
"14": "9038",
"15": "7881",
"16": "1926",
"17": "4701",
"18": "3792",
"19": "1494",
"20": "2412",
"21": "10526",
"22": "1620",
"OUTLET": "",
"BILL___DATE": "2018-09-04",
"TOTAL": "82999"
},
{
"5": "0",
"6": "376",
"7": "13712",
"8": "10799",
"9": "6039",
"10": "3902",
"11": "541",
"12": "4247",
"13": "4812",
"14": "9220",
"15": "2022",
"16": "4632",
"17": "6708",
"18": "2564",
"19": "1685",
"20": "9519",
"21": "3266",
"22": "1352",
"OUTLET": "",
"BILL___DATE": "2018-09-05",
"TOTAL": "85396"
},
{
"5": "0",
"6": "1064",
"7": "5002",
"8": "7614",
"9": "2737",
"10": "3761",
"11": "1813",
"12": "1546",
"13": "6206",
"14": "9165",
"15": "3665",
"16": "2740",
"17": "3092",
"18": "4705",
"19": "3706",
"20": "2282",
"21": "2250",
"22": "434",
"OUTLET": "",
"BILL___DATE": "2018-09-06",
"TOTAL": "61782"
}
]
function addTable(tableValue) {
var col = Object.keys(tableValue[0]); // get all the keys from first
var countNum = col.filter(i => !isNaN(i)).length; // count all which
// are number
var num = col.splice(0, countNum); // cut five elements from frist
col = col.concat(num); // shift the first item to last
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < tableValue.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
var val = tableValue[i][col[j]]
if (val && !isNaN(val)) {
val = parseInt(val).toLocaleString('en-IN')
}
tabCell.innerHTML = (val);
if (j > 1)
tabCell.classList.add("text-right");
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("newTable");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
}
addTable(tableValue)<!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>
<table id="newTable"></table>
</body>
</html>
答案 1 :(得分：1)
更新了部分代码。
您的数字是字符串，因此必须首先使用parseInt()将其转换为数字。
更新
tabCell.innerHTML = (tableValue[i][col[j]]);
进入
var tabledata = tableValue[i][col[j]];
if(tabledata && !isNaN(tabledata)){
tabledata = parseInt(tabledata).toLocaleString('en-in')
}
tabCell.innerHTML = tabledata;
完整的工作代码：
tableValue=[
{
"5": "4960",
"6": "38752",
"7": "137323",
"8": "183184",
"9": "180678",
"10": "181543",
"11": "127190",
"12": "131412",
"13": "256744",
"14": "387153",
"15": "234712",
"16": "182171",
"17": "190143",
"18": "209417",
"19": "196859",
"20": "194871",
"21": "130037",
"22": "17614",
"OUTLET": "",
"BILL___DATE": "TOTAL",
"TOTAL": "2984763"
},
{
"5": "2677",
"6": "5948",
"7": "10259",
"8": "17453",
"9": "21044",
"10": "21235",
"11": "19691",
"12": "22327",
"13": "37018",
"14": "51560",
"15": "68478",
"16": "33797",
"17": "32089",
"18": "29810",
"19": "32071",
"20": "30675",
"21": "34726",
"22": "5568",
"OUTLET": "JAYANAGAR",
"BILL___DATE": "2018-09-01",
"TOTAL": "476426"
},
{
"5": "132",
"6": "6251",
"7": "19551",
"8": "31286",
"9": "36486",
"10": "34866",
"11": "17343",
"12": "20845",
"13": "38726",
"14": "88845",
"15": "39685",
"16": "24593",
"17": "28852",
"18": "31652",
"19": "35708",
"20": "38314",
"21": "17373",
"22": "645",
"OUTLET": "",
"BILL___DATE": "2018-09-02",
"TOTAL": "511153"
},
{
"5": "0",
"6": "0",
"7": "2963",
"8": "11132",
"9": "8799",
"10": "8371",
"11": "8582",
"12": "11856",
"13": "23646",
"14": "11929",
"15": "11946",
"16": "12162",
"17": "13064",
"18": "12182",
"19": "16915",
"20": "12046",
"21": "1828",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-09-03",
"TOTAL": "167421"
},
{
"5": "988",
"6": "5361",
"7": "13765",
"8": "10278",
"9": "14426",
"10": "14739",
"11": "13559",
"12": "16443",
"13": "31829",
"14": "35478",
"15": "10231",
"16": "13290",
"17": "17278",
"18": "20462",
"19": "15580",
"20": "23984",
"21": "10403",
"22": "1618",
"OUTLET": "",
"BILL___DATE": "2018-09-04",
"TOTAL": "269712"
},
{
"5": "659",
"6": "11597",
"7": "20417",
"8": "24676",
"9": "28640",
"10": "25457",
"11": "20068",
"12": "10595",
"13": "32519",
"14": "69578",
"15": "25862",
"16": "26303",
"17": "22560",
"18": "19887",
"19": "26635",
"20": "20028",
"21": "22926",
"22": "1062",
"OUTLET": "",
"BILL___DATE": "2018-09-05",
"TOTAL": "409469"
},
{
"5": "504",
"6": "5286",
"7": "7664",
"8": "11072",
"9": "11693",
"10": "15295",
"11": "11732",
"12": "16562",
"13": "24380",
"14": "30616",
"15": "19539",
"16": "20807",
"17": "16820",
"18": "17946",
"19": "18433",
"20": "19136",
"21": "10892",
"22": "1069",
"OUTLET": "",
"BILL___DATE": "2018-09-06",
"TOTAL": "259446"
},
{
"5": "0",
"6": "0",
"7": "892",
"8": "2674",
"9": "5797",
"10": "4583",
"11": "3950",
"12": "4597",
"13": "9567",
"14": "11079",
"15": "8712",
"16": "4445",
"17": "7730",
"18": "11314",
"19": "8765",
"20": "6012",
"21": "2024",
"22": "0",
"OUTLET": "MALLESHWARAM",
"BILL___DATE": "2018-09-01",
"TOTAL": "92141"
},
{
"5": "0",
"6": "0",
"7": "1122",
"8": "3860",
"9": "6297",
"10": "10145",
"11": "5109",
"12": "4418",
"13": "9603",
"14": "11024",
"15": "9452",
"16": "5707",
"17": "9455",
"18": "11709",
"19": "11553",
"20": "12863",
"21": "3387",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-09-02",
"TOTAL": "115704"
},
{
"5": "0",
"6": "0",
"7": "1249",
"8": "1490",
"9": "2929",
"10": "3167",
"11": "2296",
"12": "1622",
"13": "5161",
"14": "6910",
"15": "5696",
"16": "4660",
"17": "6864",
"18": "8956",
"19": "4401",
"20": "2165",
"21": "1284",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-09-04",
"TOTAL": "58850"
},
{
"5": "0",
"6": "0",
"7": "2316",
"8": "5453",
"9": "8846",
"10": "4303",
"11": "6679",
"12": "2210",
"13": "5084",
"14": "5425",
"15": "3198",
"16": "6867",
"17": "7615",
"18": "12147",
"19": "6315",
"20": "3368",
"21": "608",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-09-05",
"TOTAL": "80434"
},
{
"5": "0",
"6": "0",
"7": "908",
"8": "2185",
"9": "2425",
"10": "3377",
"11": "4844",
"12": "1796",
"13": "6801",
"14": "9511",
"15": "3421",
"16": "7216",
"17": "4512",
"18": "5040",
"19": "4484",
"20": "3189",
"21": "1436",
"22": "0",
"OUTLET": "",
"BILL___DATE": "2018-09-06",
"TOTAL": "61145"
},
{
"5": "0",
"6": "1122",
"7": "9605",
"8": "13939",
"9": "10278",
"10": "15947",
"11": "5077",
"12": "6046",
"13": "8112",
"14": "10164",
"15": "7366",
"16": "3414",
"17": "4136",
"18": "7295",
"19": "3052",
"20": "4656",
"21": "3525",
"22": "1579",
"OUTLET": "KOLAR",
"BILL___DATE": "2018-09-01",
"TOTAL": "115313"
},
{
"5": "0",
"6": "0",
"7": "12694",
"8": "11191",
"9": "5931",
"10": "9017",
"11": "1188",
"12": "2331",
"13": "7590",
"14": "7265",
"15": "5924",
"16": "5627",
"17": "3456",
"18": "5135",
"19": "1634",
"20": "2104",
"21": "2470",
"22": "40",
"OUTLET": "",
"BILL___DATE": "2018-09-02",
"TOTAL": "83597"
},
{
"5": "0",
"6": "966",
"7": "2207",
"8": "9208",
"9": "3125",
"10": "744",
"11": "2439",
"12": "198",
"13": "2605",
"14": "10346",
"15": "1634",
"16": "3985",
"17": "1211",
"18": "4821",
"19": "4428",
"20": "2118",
"21": "1113",
"22": "2627",
"OUTLET": "",
"BILL___DATE": "2018-09-03",
"TOTAL": "53775"
},
{
"5": "0",
"6": "781",
"7": "12997",
"8": "8874",
"9": "5186",
"10": "2634",
"11": "2279",
"12": "3773",
"13": "3085",
"14": "9038",
"15": "7881",
"16": "1926",
"17": "4701",
"18": "3792",
"19": "1494",
"20": "2412",
"21": "10526",
"22": "1620",
"OUTLET": "",
"BILL___DATE": "2018-09-04",
"TOTAL": "82999"
},
{
"5": "0",
"6": "376",
"7": "13712",
"8": "10799",
"9": "6039",
"10": "3902",
"11": "541",
"12": "4247",
"13": "4812",
"14": "9220",
"15": "2022",
"16": "4632",
"17": "6708",
"18": "2564",
"19": "1685",
"20": "9519",
"21": "3266",
"22": "1352",
"OUTLET": "",
"BILL___DATE": "2018-09-05",
"TOTAL": "85396"
},
{
"5": "0",
"6": "1064",
"7": "5002",
"8": "7614",
"9": "2737",
"10": "3761",
"11": "1813",
"12": "1546",
"13": "6206",
"14": "9165",
"15": "3665",
"16": "2740",
"17": "3092",
"18": "4705",
"19": "3706",
"20": "2282",
"21": "2250",
"22": "434",
"OUTLET": "",
"BILL___DATE": "2018-09-06",
"TOTAL": "61782"
}
]
function addTable(tableValue) {
var col = Object.keys(tableValue[0]); // get all the keys from first
var countNum = col.filter(i => !isNaN(i)).length; // count all which
// are number
var num = col.splice(0, countNum); // cut five elements from frist
col = col.concat(num); // shift the first item to last
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < tableValue.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
var tabledata = tableValue[i][col[j]];
if(tabledata && !isNaN(tabledata)){
tabledata = parseInt(tabledata).toLocaleString('en-in')
}
tabCell.innerHTML = tabledata;
if (j > 1)
tabCell.classList.add("text-right");
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("newTable");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
}
addTable(tableValue)<!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>
<table id="newTable"></table>
</body>
</html>