Want to create JSON format for a HTML Table

Question

I want to create a HTML table. But I am not able to figure that how my JSON should be like what format and what key value pair it should have.

This is the table I want. Please anyone out there help me out with the JSON and jQuery/Javascript code corresponding to this HTML table. I am stuck here for a while now.

this is the JSON I have made earlier:

[
{
    "Billdate": "01-08-18",
    "Total": "90",
    "Ol1-total": "20",
    "c1": "2",
    "c2": "4",
    "c3": "6",
    "c4": "8",
    "Ol2-total": "36",
    "c12": "10",
    "c22": "12",
    "c32": "14",
    "Ol3-total": "34",
    "c2": "16",
    "c3": "18"

},
{
    "Billdate": "02-08-18",
    "Total": "150",
    "Ol1-total": "66",
    "c1": "20",
    "c2": "22",
    "c3": "0",
    "c4": "24",
    "Ol2-total": "54",
    "c2": "26",
    "c3": "28",
    "c4": "0",
    "Ol3-total": "30",
    "c2": "22",
    "c3": "30"
}]  

But it says duplicate key.

So I have changed my HTML style now I am not able to think about the JSON format and even the javascript to render table.
I was using this code:

function addTable() {
    var col = Object.keys(tableValue[0]);  // get all the keys from first object
    var countNum = col.filter(i => !isNaN(i)).length;
    var num = col.splice(0, countNum);
    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]];
        }
    }

    // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
    var divContainer = document.getElementById("newTable");
    divContainer.innerHTML = "";
    divContainer.appendChild(table);
}
addTable()

But it works only for single loop, not nested and all.

Answer 1

I would calculate the column totals separately and not have them as part of the dataset:

 const data = [ // a rows comprises a date, a three arrays of column data { date: '01/02/2018', ol1: [10, 20, 25], ol2: [15, 30], ol3: [35] }, { date: '02/02/2018', ol1: [5, 0, 15], ol2: [10, 0], ol3: [20] } ]; // calculates the sum of an array of integers const sum = (arr) => arr.reduce((n, c) => n + c, 0); // group cells of a type const group = (arr) => arr.map(el => `<td>${el}</td>`).join(''); // `map` over each row object in the dataset const rows = data.map(row => { // calculate the totals up-front const ol1total = sum(row.ol1); const ol2total = sum(row.ol2); const ol3total = sum(row.ol3); const alltotal = sum([ol1total, ol2total, ol3total]); // then return a string of HTML for each row return ` <tr> <td>${row.date}</td> <td>${alltotal}</td> <td>${ol1total}</td> ${group(row.ol1)} <td>${ol2total}</td> ${group(row.ol2)} <td>${ol3total}</td> ${group(row.ol3)} </tr>` }); // create some heading HTML const headings = ['date', 'counter', 'total', 'c1', 'c2', 'c3', 'total', 'c1', 'c2', 'total', 'c1']; const headingsHTML = `<td>${headings.join('</td><td>')}</td>`; // add it to the DOM document.body.insertAdjacentHTML('beforeend', ` <table> <thead>${headingsHTML}</thead> <tbody>${rows.join('')}</tbody> </table> `);

 table { border-collapse: collapse; } thead { font-weight: bold; background-color: #efefef;} td { border: 1px solid #bcbcbc; padding: 3px; }