Wednesday, 15 May 2019

How to create dynamic HTML header

I am creating a dynamic HTML table which has col-span inside,the issue is i am not able to create that col-span headers dynamically,below is my json

json

[{
    "billdate": "2018-09-01",
    "outlet": "JAYANAGAR",
    "gross": 451458,
    "discount": 513,
    "GST": 25357,
    "amount": 476426
  },
  {
    "billdate": "2018-09-01",
    "outlet": "MALLESHWARAM",
    "gross": 87190,
    "discount": 0,
    "GST": 4930,
    "amount": 92141
  },
  {
    "billdate": "2018-09-01",
    "outlet": "KOLAR",
    "gross": 109308,
    "discount": 0,
    "GST": 5966,
    "amount": 115313
  },
  {
    "billdate": "2018-09-02",
    "outlet": "JAYANAGAR",
    "gross": 483194,
    "discount": 471,
    "GST": 28319,
    "amount": 511153
  },
  {
    "billdate": "2018-09-02",
    "outlet": "MALLESHWARAM",
    "gross": 109483,
    "discount": 0,
    "GST": 6198,
    "amount": 115704
  },
  {
    "billdate": "2018-09-02",
    "outlet": "KOLAR",
    "gross": 79305,
    "discount": 0,
    "GST": 4254,
    "amount": 83597
  },
  {
    "billdate": "2018-09-03",
    "outlet": "JAYANAGAR",
    "gross": 157660,
    "discount": 263,
    "GST": 9944,
    "amount": 167421
  },
  {
    "billdate": "2018-09-03",
    "outlet": "KOLAR",
    "gross": 51059,
    "discount": 0,
    "GST": 2693,
    "amount": 53775
  }
]

billdate and outlet are parent header inside outlets i.e Jayanagar,malleshwaram and kolar here inside this i have other object values i.e gross,discount,GST and amount

  • The four gross,discount,GST and amount these are as col-span which i am creating staticallu like innerHTML=gross
  • I want to create them dynamically and not getting the idea how to achieve that
var data = [{
    "billdate": "2018-09-01",
    "outlet": "JAYANAGAR",
    "gross": 451458,
    "discount": 513,
    "GST": 25357,
    "amount": 476426
  },
  {
    "billdate": "2018-09-01",
    "outlet": "MALLESHWARAM",
    "gross": 87190,
    "discount": 0,
    "GST": 4930,
    "amount": 92141
  },
  {
    "billdate": "2018-09-01",
    "outlet": "KOLAR",
    "gross": 109308,
    "discount": 0,
    "GST": 5966,
    "amount": 115313
  },
  {
    "billdate": "2018-09-02",
    "outlet": "JAYANAGAR",
    "gross": 483194,
    "discount": 471,
    "GST": 28319,
    "amount": 511153
  },
  {
    "billdate": "2018-09-02",
    "outlet": "MALLESHWARAM",
    "gross": 109483,
    "discount": 0,
    "GST": 6198,
    "amount": 115704
  },
  {
    "billdate": "2018-09-02",
    "outlet": "KOLAR",
    "gross": 79305,
    "discount": 0,
    "GST": 4254,
    "amount": 83597
  },
  {
    "billdate": "2018-09-03",
    "outlet": "JAYANAGAR",
    "gross": 157660,
    "discount": 263,
    "GST": 9944,
    "amount": 167421
  },
  {
    "billdate": "2018-09-03",
    "outlet": "KOLAR",
    "gross": 51059,
    "discount": 0,
    "GST": 2693,
    "amount": 53775
  }
]
let formatData = function(data) {
  let billdates = [];
  let outlets = [];
  data.forEach(element => {
    if (billdates.indexOf(element.billdate) == -1) {
      billdates.push(element.billdate);
    }
    if (outlets.indexOf(element.outlet) == -1) {
      outlets.push(element.outlet);
    }
  });
  return {
    data: data,
    billdates: billdates,
    outlets: outlets,

  };
};

let renderTable = function(data) {
  billdates = data.billdates;
  outlets = data.outlets;
  data = data.data;
  let tbl = document.getElementById("dailySales");
  let table = document.createElement("table");
  let thead = document.createElement("thead");
  let headerRow = document.createElement("tr");
  let th = document.createElement("th");
  th.innerHTML = "BillDate";
  th.classList.add("text-center");
  headerRow.appendChild(th);
  let grandTotal = 0;
  let grandGross = 0;
  let grandDiscount = 0;
  let grandGst = 0;
  let outletWiseTotal = {};
  let outletWiseGross = {};
  let outletWiseDiscount = {};
  let outletWiseGst = {};
  th = document.createElement("th");
  th.colSpan = 4;
  th.innerHTML = "Total";
  th.classList.add("text-center");
  headerRow.appendChild(th);
  outlets.forEach(element => {

    th = document.createElement("th");
    th.colSpan = 4;
    th.innerHTML = element;
    th.classList.add("text-center");
    headerRow.appendChild(th);

    outletWiseTotal[element] = 0;
    outletWiseGross[element] = 0;
    outletWiseDiscount[element] = 0;
    outletWiseGst[element] = 0;
    data.forEach(el => {
      if (el.outlet == element) {
        outletWiseTotal[element] += parseInt(el.amount);
        outletWiseGross[element] += parseInt(el.gross);
        outletWiseDiscount[element] += parseInt(el.discount);
        outletWiseGst[element] += parseInt(el.GST);
      }
    });
    grandTotal += outletWiseTotal[element]; //calculating totals for Total column
    grandGross += outletWiseGross[element];
    grandDiscount += outletWiseDiscount[element];
    grandGst += outletWiseGst[element];
  });

  thead.appendChild(headerRow);
  headerRow = document.createElement("tr");
  th = document.createElement("th");
  th.innerHTML = "";
  headerRow.appendChild(th);

  for (i = 0; i < outlets.length + 1; i++) {
    th = document.createElement("th");
    th.innerHTML = "Discount"; //here statically i am giving the header names
    th.classList.add("text-center");
    th.classList.add("discount");
    headerRow.appendChild(th);

    th = document.createElement("th");
    th.innerHTML = "GST"; //here statically i am giving the header names
    th.classList.add("text-center");
    th.classList.add("gst");

    headerRow.appendChild(th);

    th = document.createElement("th");
    th.innerHTML = "Net_Amount"; //here statically i am giving the header names
    th.classList.add("text-center");
    th.classList.add("netAmount");
    headerRow.appendChild(th);
    th = document.createElement("th");
    th.innerHTML = "Gross_Amount"; //here statically i am giving the header names
    th.classList.add("text-center");
    th.classList.add("grossAmount");
    headerRow.appendChild(th);
  }

  headerRow.insertBefore(th, headerRow.children[1]);
  thead.appendChild(headerRow);
  table.appendChild(thead);

  headerRow = document.createElement("tr");
  td = document.createElement("th");
  td.innerHTML = "Total";
  td.classList.add("text-center");
  headerRow.appendChild(td);

  outlets.forEach(element => { // these are the table rows for each column
    td = document.createElement("th");
    td.innerHTML = outletWiseGross[element].toLocaleString('en-IN');
    td.classList.add("text-right");
    headerRow.appendChild(td);

    td = document.createElement("th");
    td.innerHTML = outletWiseDiscount[element].toLocaleString('en-IN');
    td.classList.add("text-right");
    headerRow.appendChild(td);

    td = document.createElement("th");
    td.innerHTML = outletWiseGst[element].toLocaleString('en-IN');
    td.classList.add("text-right");
    headerRow.appendChild(td);

    td = document.createElement("th");
    td.innerHTML = outletWiseTotal[element].toLocaleString('en-IN');
    td.classList.add("text-right");
    headerRow.appendChild(td);


  });
  td = document.createElement("th");
  td.innerHTML = grandTotal.toLocaleString('en-IN');
  td.classList.add("text-right");
  headerRow.insertBefore(td, headerRow.children[1]);

  td = document.createElement("th");
  td.innerHTML = grandGst.toLocaleString('en-IN');
  td.classList.add("text-right");
  headerRow.insertBefore(td, headerRow.children[1]);

  td = document.createElement("th");
  td.innerHTML = grandDiscount.toLocaleString('en-IN');
  td.classList.add("text-right");
  headerRow.insertBefore(td, headerRow.children[1]);

  td = document.createElement("th");
  td.innerHTML = grandGross.toLocaleString('en-IN');
  td.classList.add("text-right");
  headerRow.insertBefore(td, headerRow.children[1]);


  thead.appendChild(headerRow);
  table.appendChild(thead);

  let tbody = document.createElement("tbody");
  billdates.forEach(element => {
    let row = document.createElement("tr");
    td = document.createElement("td");
    td.innerHTML = element;
    row.appendChild(td);

    let total = 0;
    let totalGross = 0;
    let totalDiscount = 0;
    let totalGST = 0;
    outlets.forEach(outlet => {
      let ta = 0;
      let tg = 0;
      let tdi = 0;
      let tgst = 0;
      data.forEach(d => {
        if (d.billdate == element && d.outlet == outlet) {
          total += parseInt(d.amount);
          totalGross += parseInt(d.gross);
          totalDiscount += parseInt(d.discount);
          totalGST += parseInt(d.GST);
          ta = d.amount;
          tg = d.gross;
          tdi = d.discount;
          tgst = d.GST;
        }
      });

      td = document.createElement("td");
      td.innerHTML = tg.toLocaleString('en-IN');
      td.classList.add("text-right");
      row.appendChild(td);

      td = document.createElement("td");
      td.innerHTML = tdi.toLocaleString('en-IN');
      td.classList.add("text-right");
      row.appendChild(td);

      td = document.createElement("td");
      td.innerHTML = tgst.toLocaleString('en-IN');
      td.classList.add("text-right");
      row.appendChild(td);

      td = document.createElement("td");
      td.innerHTML = ta.toLocaleString('en-IN');
      td.classList.add("text-right");
      row.appendChild(td);




    });


    td = document.createElement("td");
    td.innerHTML = total.toLocaleString('en-IN');
    td.classList.add("text-right");
    row.insertBefore(td, row.children[1]);

    td = document.createElement("td");
    td.innerHTML = totalGST.toLocaleString('en-IN');
    td.classList.add("text-right");
    row.insertBefore(td, row.children[1]);

    td = document.createElement("td");
    td.innerHTML = totalDiscount.toLocaleString('en-IN');
    td.classList.add("text-right");
    row.insertBefore(td, row.children[1]);



    td = document.createElement("td");
    td.innerHTML = totalGross.toLocaleString('en-IN');
    td.classList.add("text-right");
    row.insertBefore(td, row.children[1]);


    tbody.appendChild(row);
  });

  table.appendChild(tbody);
  tbl.innerHTML = "";
  tbl.appendChild(table);
  table.classList.add("table");
  table.classList.add("table-striped");
  table.classList.add("table-bordered");
  table.classList.add("table-hover");
}
let formatedData = formatData(data);
renderTable(formatedData);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div align="left" class="table table-responsive" id="commonDvScroll">
  <table id="dailySales"></table>
</div>
  • As per requirnment gross,discount,GST and amount all these are dynamic they can be 3 sometimes 2 and sometimes 1 so that i am trying to create dynamically
  • I have commented the lines in my code where i am creating these as headers

EDIT here in the below JSON i have only discount,gst and amount there is no gross so in my table i only want to these three headers as col-span in my table

As solution provided by @Anilm doesn't seems to be doing like this

[{
    "billdate": "2018-09-01",
    "outlet": "JAYANAGAR",

    "discount": 513,
    "GST": 25357,
    "amount": 476426
  },
  {
    "billdate": "2018-09-01",
    "outlet": "MALLESHWARAM",

    "discount": 0,
    "GST": 4930,
    "amount": 92141
  },
  {
    "billdate": "2018-09-01",
    "outlet": "KOLAR",

    "discount": 0,
    "GST": 5966,
    "amount": 115313
  },
  {
    "billdate": "2018-09-02",
    "outlet": "JAYANAGAR",

    "discount": 471,
    "GST": 28319,
    "amount": 511153
  },
  {
    "billdate": "2018-09-02",
    "outlet": "MALLESHWARAM",
           "discount": 0,
    "GST": 6198,
    "amount": 115704
  },
  {
    "billdate": "2018-09-02",
    "outlet": "KOLAR",

    "discount": 0,
    "GST": 4254,
    "amount": 83597
  },
  {
    "billdate": "2018-09-03",
    "outlet": "JAYANAGAR",

    "discount": 263,
    "GST": 9944,
    "amount": 167421
  },
  {
    "billdate": "2018-09-03",
    "outlet": "KOLAR",

    "discount": 0,
    "GST": 2693,
    "amount": 53775
  }
]

When in my JSON all gross,Discount,Gst and Amount are there then this will be output

When only Discount,GST and Amount are there then this will be out put

Similarly for others also

these four gross,discount,GSTand amount are dynamic user is selecting any one,two or all then i want to populate the table

  • I am totally messed up what approach should I Try Please Anyone out here help me out with this problem


from How to create dynamic HTML header
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)