How to put comma seperator for numbers using JavaScript internally?

Question

I have an HTML page where I am showing my HTML table from JSON data. I want to put a comma separator for all the numbers I have in Indian format.

I know that by using .toLocaleString('en-IN') I can achieve what I want, but where should I put it in my code? I am very confused.

Here is my code:

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)

Where should I write the .toLocaleString('en-IN') in my code to put comma separator for all my numbers

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>

A problem you'll have is that your numbers are strings, so calling toLocaleString won't have any effect. You should convert them to numbers first using parseInt. — Khauri
– Khauri, Commented Nov 16, 2018 at 12:26

Khauri · Accepted Answer · 2018-11-16 13:02:35Z

Here's something that doesn't change too much of the code you have already.

As I mentioned the main problem is that your strings aren't numbers so you calling toLocaleString won't have any effect.

You can check if the tableValue is a number using !isNaN before adding it and then call parseInt on the value, then 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");

}

disclaimer Since I'm sure this isn't the full data set, your mileage may vary with this answer. You may or may not need to add more complex checks. Another option to consider is to do all of this as soon as you get the data in a sort of validation and cleaning phase. That way you can decouple the rendering/displaying logic and the data checking logic, in case you want to modify the data more than just this. You can see that your program might get complex if you start stuffing all this into the one loop above.

Edit

Snippet with suggested modifications:

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>

Not sure what you mean by that. What's "dates got" and how are you increasing it?
i am editing json in your answer look for that json its not workin
In what way is it "not working?" I pasted in your new JSON to a snippet and the numbers seem to be converting fine.

manish thakur · Accepted Answer · 2018-11-16 13:01:41Z

Updated a part of your code.
Your numbers are strings so you must convert them to numbers first with parseInt().

Update

tabCell.innerHTML = (tableValue[i][col[j]]);

Into

 var tabledata = tableValue[i][col[j]];
    if(tabledata && !isNaN(tabledata)){
      tabledata = parseInt(tabledata).toLocaleString('en-in')
    }
    tabCell.innerHTML = tabledata;

Full working code:

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>

ok i have figured out for except date but what i want is indian format like for 4050237 40,50,237

Collectives™ on Stack Overflow

How to put comma seperator for numbers using JavaScript internally?

2 Answers 2

3 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related