CODEWITHSUNDEEP
javascripthtml
manish thakur
manish thakur

Reputation: 820

How to put comma seperator for numbers using JavaScript internally?

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>

Upvotes: 0

Views: 105

Answers (2)

Khauri
Khauri

Reputation: 3863

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>

Upvotes: 2

Webdeveloper_Jelle
Webdeveloper_Jelle

Reputation: 2856

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>

Upvotes: 1

Related Questions