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

Question

这是我的 View 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，因为 key 在其中不是唯一的。我应该如何或什么格式的JSON设计或者我应该改变表的 View ？我无法同时做到这两点。

我正在发布用于填充表格的 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>