Question

我想创建一个HTML表。但是我无法弄清楚我的JSON应该像什么样的格式和什么键值对那样。

这是我想要的桌子。请在那里的任何人帮我解决与此HTML表相对应的JSON和jQuery / Javascript代码。我现在在这里停留了一段时间。

这是我之前制作的JSON：

[
{
    "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"
}]

但是它说重复的钥匙。

因此，我现在已经更改了HTML样式，因此我无法考虑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

我将单独计算列总计，而不将其作为数据集的一部分：

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

想要为HTML表创建JSON格式

1 个答案: