Question

这是我查看HTML表格的地方。我缺少json制作功能，我也不知道如何用JavaScript填充它，因为插座名称也具有列跨度。

我正在根据JSON数据创建HTML表。我一直坚持表的格式。请查看新图片：

我想使其像

我为此创建了一个JSON格式，如下所示

[
                      {
                            "Billdate": "01-08-18",
                            "Total": "90",
                            "Ol1-total": "20",
                            "c1": "2",
                            "c2": "4",
                            "c3": "6",
                            "c4": "8",
                            "Ol2-total": "36",
                            "c1": "10",
                            "c2": "12",
                            "c3": "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",
                            "Ol-total": "54",
                            "c1": "26",
                            "c2": "28",
                            "c3": "0",
                            "Ol-total": "30",
                            "c2": "22",
                            "c3": "30"
                          }
                        ]

但这不是有效的JSON，因为密钥在其中不是唯一的。所以我的问题是，我应该如何设计JSON格式或哪种格式，或者应该更改表的视图？我不能两者都做。

如果有人认为我的表格视图应该是这样，请与我分享。还是有人为此使用正确的JSON格式？

我正在发布用于填充表格的JavaScript代码：

 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()

Answer 1

每个日期都是一个键，值是一个代表计数器的二维数组。

我删除了总计，因为它们都是各自所属组的总计，并且可以通过编程方式进行汇总。但是，您可以根据需要将它们重新添加到末尾。

{
  '01-08-18': [['2', '4', '6', '8'], ['10', '12', '14'], ['16', '18']],
  '02-08-18': [['20', '22', '0', '24'], ['26', '28', '0'], ['22', '30']]
}

这是javascript的解决方案：

'use strict'
const testdata = {
  '01-08-18': [['2', '4', '6', '8'], ['10', '12', '14'], ['16', '18']],
  '02-08-18': [['20', '22', '0', '24'], ['26', '28', '0'], ['22', '30']]
}

const table = document.getElementById('table')

// Create header, considering only first element from table
const firstKey = Object.keys(testdata)[0]
const header = document.getElementById('tableheader')
// add total th
const totalth = document.createElement('th')
totalth.innerHTML = "Row Total"
header.append(totalth)


for (let i = 0; i < testdata[firstKey].length; i++) {
  const O = document.createElement('th')
  O.innerHTML = `O${i + 1} total`
  header.append(O)
  for (let j = 0; j < testdata[firstKey][i].length; j++) {
    const th = document.createElement('th')
    th.innerHTML = `c${j + 1}`
    header.append(th)
  }
}

// Fill in the data
let i = 0
for (let key in testdata) {
  const row = table.appendChild(document.createElement('tr'))
  let datetd = document.createElement('td')
  datetd.innerHTML = key
  row.append(datetd)
  //apend this rows total so we can update it after the loop
  const rowtotaltd = document.createElement('td')
  row.append(rowtotaltd)
  let rowTotal = 0
  testdata[key].map(ol => {
    // add total
    const total = ol.reduce((sum, current) => sum + parseInt(current), 0)
    rowTotal += total
    const totaltd = document.createElement('td')
    totaltd.innerHTML = total
    row.append(totaltd)
    //add individual values
    ol.map(c => {
      const td = document.createElement('td')
      td.innerHTML = c
      row.append(td)
    })
  })
  //update row total td
  rowtotaltd.innerHTML = rowTotal
  i++
}

table {
  border: 1px solid black;
}

td {
  border: 1px solid black;
}

<table id='table'>
  <tr id='tableheader'>
    <th>Billdate</th>
  </tr>
</table>

Answer 2

Plz尝试让我知道是否有任何问题。

data = [{
    "amount": 49644,
    "billdate": "2018-09-01",
    "counter": "North Indian",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 194495,
    "billdate": "2018-09-01",
    "counter": "South Indian-1-Flr",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 80768,
    "billdate": "2018-09-01",
    "counter": "Take-away counter 1",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 60878,
    "billdate": "2018-09-01",
    "counter": "Coffee Counter",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 81999,
    "billdate": "2018-09-01",
    "counter": "Trade Pos1",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 8642,
    "billdate": "2018-09-01",
    "counter": "Trade Pos 2",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 53822,
    "billdate": "2018-09-01",
    "counter": "Restaurant",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 15339,
    "billdate": "2018-09-01",
    "counter": "Coffee Counter",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 7548,
    "billdate": "2018-09-01",
    "counter": "Takeaway",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 15432,
    "billdate": "2018-09-01",
    "counter": "Trade POS",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 107602,
    "billdate": "2018-09-01",
    "counter": "Restaurant",
    "outlet": "KOLAR"
  },
  {
    "amount": 7711,
    "billdate": "2018-09-01",
    "counter": "Trade POS",
    "outlet": "KOLAR"
  },
  {
    "amount": 39,
    "billdate": "2018-09-02",
    "counter": "North Indian",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 118647,
    "billdate": "2018-09-02",
    "counter": "South Indian-1-Flr",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 119871,
    "billdate": "2018-09-02",
    "counter": "South Indian-2-Flr",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 109527,
    "billdate": "2018-09-02",
    "counter": "Take-away counter 1",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 64771,
    "billdate": "2018-09-02",
    "counter": "Coffee Counter",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 78037,
    "billdate": "2018-09-02",
    "counter": "Trade Pos1",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 20261,
    "billdate": "2018-09-02",
    "counter": "Trade Pos 2",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 69946,
    "billdate": "2018-09-02",
    "counter": "Restaurant",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 18197,
    "billdate": "2018-09-02",
    "counter": "Coffee Counter",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 8741,
    "billdate": "2018-09-02",
    "counter": "Takeaway",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 18820,
    "billdate": "2018-09-02",
    "counter": "Trade POS",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 78537,
    "billdate": "2018-09-02",
    "counter": "Restaurant",
    "outlet": "KOLAR"
  },
  {
    "amount": 5060,
    "billdate": "2018-09-02",
    "counter": "Trade POS",
    "outlet": "KOLAR"
  },
  {
    "amount": 49096,
    "billdate": "2018-09-03",
    "counter": "Take-away counter 1",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 58477,
    "billdate": "2018-09-03",
    "counter": "Coffee Counter",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 49933,
    "billdate": "2018-09-03",
    "counter": "Trade Pos1",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 9915,
    "billdate": "2018-09-03",
    "counter": "Trade Pos 2",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 51209,
    "billdate": "2018-09-03",
    "counter": "Restaurant",
    "outlet": "KOLAR"
  },
  {
    "amount": 2566,
    "billdate": "2018-09-03",
    "counter": "Trade POS",
    "outlet": "KOLAR"
  }
];

function formatData(data) {
  let toReturn = [];
  let dateWiseObj = {};
  let maxUniqueForOutlets = {};
  data.forEach(function(d) {
    if (!maxUniqueForOutlets[d["outlet"]]) {
      maxUniqueForOutlets[d["outlet"]] = [];
    }
    if (maxUniqueForOutlets[d["outlet"]].indexOf(d["counter"]) == -1) {
      maxUniqueForOutlets[d["outlet"]].push(d["counter"]);
    }

    if (!dateWiseObj[d["billdate"]]) {
      dateWiseObj[d["billdate"]] = {};
      dateWiseObj[d["billdate"]][d["outlet"]] = {};
      dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;
    } else {
      if (!dateWiseObj[d["billdate"]][d["outlet"]]) {
        dateWiseObj[d["billdate"]][d["outlet"]] = {};
        dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;
      } else {
        if (!dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]]) {
          dateWiseObj[d["billdate"]][d["outlet"]][d["counter"]] = d;
        }
      }
    }

  });

  return {
    dateWiseObj: dateWiseObj,
    maxUniqueForOutlets: maxUniqueForOutlets
  };
};


function addTable(dataObj) {
  let dateWiseObj = dataObj.dateWiseObj;
  let maxUniqueForOutlets = dataObj.maxUniqueForOutlets;
  let table = document.createElement("table");
  let thead = document.createElement("thead");
  let headerRow = document.createElement("tr");
  let th = document.createElement("th");
  th.innerHTML = "Outlet";
  headerRow.appendChild(th);
  th = document.createElement("th");
  th.innerHTML = "Total";
  headerRow.appendChild(th);
  Object.keys(maxUniqueForOutlets).forEach(function(d) {
    th = document.createElement("th");
    th.innerHTML = d;
    th.colSpan = maxUniqueForOutlets[d].length + 1;
    headerRow.appendChild(th);
  });
  table.appendChild(thead);
  thead.appendChild(headerRow);

  headerRow = document.createElement("tr");
  th = document.createElement("th");
  th.innerHTML = "Date";
  headerRow.appendChild(th);
  th = document.createElement("th");
  th.innerHTML = "Counter";
  headerRow.appendChild(th);
  Object.keys(maxUniqueForOutlets).forEach(function(k) {
    th = document.createElement("th");
    th.innerHTML = "Total";
    headerRow.appendChild(th);
    maxUniqueForOutlets[k].forEach(function(d) {
      th = document.createElement("th");
      th.innerHTML = d;
      headerRow.appendChild(th);
    });
  });
  table.appendChild(thead);
  thead.appendChild(headerRow);

  let tbody = document.createElement("tbody");
  Object.keys(dateWiseObj).forEach(function(k) {
    let row = document.createElement("tr");

    let td = document.createElement("td");
    td.innerHTML = k;
    row.appendChild(td);

    grandTotal = 0;
    outletWiseTotal = {};
    Object.keys(maxUniqueForOutlets).map(function(d) {
      outletWiseTotal[d] = 0;
      if (dateWiseObj[k][d]) {
        Object.keys(dateWiseObj[k][d]).forEach(function(i) {
          outletWiseTotal[d] += parseInt(dateWiseObj[k][d][i]["amount"] || "0");
        });
      }
      grandTotal += outletWiseTotal[d];
    });
    td = document.createElement("td");
    td.innerHTML = grandTotal;
    row.appendChild(td);

    Object.keys(maxUniqueForOutlets).map(function(d) {
      td = document.createElement("td");
      td.innerHTML = outletWiseTotal[d];

      row.appendChild(td);
      if (dateWiseObj[k][d]) {
        maxUniqueForOutlets[d].forEach(function(i) {
          td = document.createElement("td");
          td.innerHTML = dateWiseObj[k][d][i] ? dateWiseObj[k][d][i]["amount"] : "0";
          row.appendChild(td);
        });
      } else {
        maxUniqueForOutlets[d].forEach(function(i) {
          td = document.createElement("td");
          td.innerHTML = "0";
          row.appendChild(td);
        });
      }
    });
    tbody.appendChild(row);
    //console.log(outletWiseTotal);
  });
  table.appendChild(tbody);
  let divContainer = document.getElementById("tbl");
  divContainer.innerHTML = "";
  divContainer.appendChild(table);
  table.classList.add("table");
  table.classList.add("table-striped");
  table.classList.add("table-bordered");
}

var dataObj = formatData(data);
addTable(dataObj);

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="tbl"></div>

如何为HTML表创建所需的JSON？

2 个答案: