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>

edited Dec 2 '18 at 22:09

halfer

14.7k759116

asked Nov 16 '18 at 12:00

manish thakur

18313

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 McClain
Nov 16 '18 at 12:26

add a comment |

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>

edited Dec 2 '18 at 22:09

halfer

14.7k759116

asked Nov 16 '18 at 12:00

manish thakur

18313

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 McClain
Nov 16 '18 at 12:26

add a comment |

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>

edited Dec 2 '18 at 22:09

halfer

14.7k759116

asked Nov 16 '18 at 12:00

manish thakur

18313

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>

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>

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>

javascript html

edited Dec 2 '18 at 22:09

halfer

14.7k759116

asked Nov 16 '18 at 12:00

manish thakur

18313

edited Dec 2 '18 at 22:09

halfer

14.7k759116

asked Nov 16 '18 at 12:00

manish thakur

18313

edited Dec 2 '18 at 22:09

halfer

14.7k759116

edited Dec 2 '18 at 22:09

halfer

14.7k759116

edited Dec 2 '18 at 22:09

halfer

14.7k759116

asked Nov 16 '18 at 12:00

manish thakur

18313

asked Nov 16 '18 at 12:00

manish thakur

18313

asked Nov 16 '18 at 12:00

manish thakur

18313

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 McClain
Nov 16 '18 at 12:26

add a comment |

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 McClain
Nov 16 '18 at 12:26

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 McClain
Nov 16 '18 at 12:26

add a comment |

2 Answers
2

active

oldest

votes

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>

edited Nov 16 '18 at 13:01

manish thakur

18313

answered Nov 16 '18 at 12:14

Jbadminton

60921031

hey its putting seperator for dates also which i dont want

– manish thakur
Nov 16 '18 at 12:22

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

– manish thakur
Nov 16 '18 at 12:29

hey you there??

– manish thakur
Nov 16 '18 at 12:37

1

yeah working on it

– Jbadminton
Nov 16 '18 at 12:39

1

yup working fine

– manish thakur
Nov 16 '18 at 12:49

|
show 5 more comments

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>

edited Nov 16 '18 at 13:02

answered Nov 16 '18 at 12:38

Khauri McClain

2,2901414

if dates got increases it showing nothing

– manish thakur
Nov 16 '18 at 12:52

Not sure what you mean by that. What's "dates got" and how are you increasing it?

– Khauri McClain
Nov 16 '18 at 12:54

i am editing json in your answer look for that json its not workin

– manish thakur
Nov 16 '18 at 12:55

In what way is it "not working?" I pasted in your new JSON to a snippet and the numbers seem to be converting fine.

– Khauri McClain
Nov 16 '18 at 13:04

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');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53337487%2fhow-to-put-comma-seperator-for-numbers-using-javascript-internally%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

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>

edited Nov 16 '18 at 13:01

manish thakur

18313

answered Nov 16 '18 at 12:14

Jbadminton

60921031

hey its putting seperator for dates also which i dont want

– manish thakur
Nov 16 '18 at 12:22

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

– manish thakur
Nov 16 '18 at 12:29

hey you there??

– manish thakur
Nov 16 '18 at 12:37

1

yeah working on it

– Jbadminton
Nov 16 '18 at 12:39

1

yup working fine

– manish thakur
Nov 16 '18 at 12:49

|
show 5 more comments

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>

edited Nov 16 '18 at 13:01

manish thakur

18313

answered Nov 16 '18 at 12:14

Jbadminton

60921031

hey its putting seperator for dates also which i dont want

– manish thakur
Nov 16 '18 at 12:22

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

– manish thakur
Nov 16 '18 at 12:29

hey you there??

– manish thakur
Nov 16 '18 at 12:37

1

yeah working on it

– Jbadminton
Nov 16 '18 at 12:39

1

yup working fine

– manish thakur
Nov 16 '18 at 12:49

|
show 5 more comments

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>

edited Nov 16 '18 at 13:01

manish thakur

18313

answered Nov 16 '18 at 12:14

Jbadminton

60921031

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>

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>

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>

edited Nov 16 '18 at 13:01

manish thakur

18313

answered Nov 16 '18 at 12:14

Jbadminton

60921031

edited Nov 16 '18 at 13:01

manish thakur

18313

edited Nov 16 '18 at 13:01

manish thakur

18313

edited Nov 16 '18 at 13:01

manish thakur

18313

answered Nov 16 '18 at 12:14

Jbadminton

60921031

answered Nov 16 '18 at 12:14

Jbadminton

60921031

answered Nov 16 '18 at 12:14

Jbadminton

60921031

hey its putting seperator for dates also which i dont want

– manish thakur
Nov 16 '18 at 12:22

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

– manish thakur
Nov 16 '18 at 12:29

hey you there??

– manish thakur
Nov 16 '18 at 12:37

1

yeah working on it

– Jbadminton
Nov 16 '18 at 12:39

1

yup working fine

– manish thakur
Nov 16 '18 at 12:49

|
show 5 more comments

hey its putting seperator for dates also which i dont want

– manish thakur
Nov 16 '18 at 12:22

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

– manish thakur
Nov 16 '18 at 12:29

hey you there??

– manish thakur
Nov 16 '18 at 12:37

1

yeah working on it

– Jbadminton
Nov 16 '18 at 12:39

1

yup working fine

– manish thakur
Nov 16 '18 at 12:49

hey its putting seperator for dates also which i dont want

– manish thakur
Nov 16 '18 at 12:22

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

– manish thakur
Nov 16 '18 at 12:29

hey you there??

– manish thakur
Nov 16 '18 at 12:37

yeah working on it

– Jbadminton
Nov 16 '18 at 12:39

yup working fine

– manish thakur
Nov 16 '18 at 12:49

|
show 5 more comments

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");



}

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>

edited Nov 16 '18 at 13:02

answered Nov 16 '18 at 12:38

Khauri McClain

2,2901414

if dates got increases it showing nothing

– manish thakur
Nov 16 '18 at 12:52

Not sure what you mean by that. What's "dates got" and how are you increasing it?

– Khauri McClain
Nov 16 '18 at 12:54

i am editing json in your answer look for that json its not workin

– manish thakur
Nov 16 '18 at 12:55

In what way is it "not working?" I pasted in your new JSON to a snippet and the numbers seem to be converting fine.

– Khauri McClain
Nov 16 '18 at 13:04

add a comment |

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");



}

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>

edited Nov 16 '18 at 13:02

answered Nov 16 '18 at 12:38

Khauri McClain

2,2901414

if dates got increases it showing nothing

– manish thakur
Nov 16 '18 at 12:52

Not sure what you mean by that. What's "dates got" and how are you increasing it?

– Khauri McClain
Nov 16 '18 at 12:54

i am editing json in your answer look for that json its not workin

– manish thakur
Nov 16 '18 at 12:55

In what way is it "not working?" I pasted in your new JSON to a snippet and the numbers seem to be converting fine.

– Khauri McClain
Nov 16 '18 at 13:04

add a comment |

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");



}

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>

edited Nov 16 '18 at 13:02

answered Nov 16 '18 at 12:38

Khauri McClain

2,2901414

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");



}

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>

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>

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>

edited Nov 16 '18 at 13:02

answered Nov 16 '18 at 12:38

Khauri McClain

2,2901414

edited Nov 16 '18 at 13:02

answered Nov 16 '18 at 12:38

Khauri McClain

2,2901414

answered Nov 16 '18 at 12:38

Khauri McClain

2,2901414

answered Nov 16 '18 at 12:38

Khauri McClain

2,2901414

if dates got increases it showing nothing

– manish thakur
Nov 16 '18 at 12:52

Not sure what you mean by that. What's "dates got" and how are you increasing it?

– Khauri McClain
Nov 16 '18 at 12:54

i am editing json in your answer look for that json its not workin

– manish thakur
Nov 16 '18 at 12:55

In what way is it "not working?" I pasted in your new JSON to a snippet and the numbers seem to be converting fine.

– Khauri McClain
Nov 16 '18 at 13:04

add a comment |

if dates got increases it showing nothing

– manish thakur
Nov 16 '18 at 12:52

Not sure what you mean by that. What's "dates got" and how are you increasing it?

– Khauri McClain
Nov 16 '18 at 12:54

i am editing json in your answer look for that json its not workin

– manish thakur
Nov 16 '18 at 12:55

In what way is it "not working?" I pasted in your new JSON to a snippet and the numbers seem to be converting fine.

– Khauri McClain
Nov 16 '18 at 13:04

if dates got increases it showing nothing

– manish thakur
Nov 16 '18 at 12:52

Not sure what you mean by that. What's "dates got" and how are you increasing it?

– Khauri McClain
Nov 16 '18 at 12:54

i am editing json in your answer look for that json its not workin

– manish thakur
Nov 16 '18 at 12:55

In what way is it "not working?" I pasted in your new JSON to a snippet and the numbers seem to be converting fine.

– Khauri McClain
Nov 16 '18 at 13:04

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');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky