Question

以下是我的JSON示例：

{
    "2017-05-06": {
        "13": {
            "Chris": "2", "Ian": "3"
        },
        "14": {
            "Chris": "4", "Rob": "4"
        },
        "16": {
            "Ian": "3", "Rob": 2
        }
    }
}

理想情况下，我需要使用JS才能在表格中显示它，并且任何填充零的空白，列标题（小时）依次排列，即使它们是空的，总列数和行数也是如此。

2017-05-06
        13   14   15   16    T
Chris    2    4    0    0    6
Ian      3    0    0    3    6
Rob      0    4    0    2    6
Total    5    8    0    5   18

我不知道从哪里开始，所以非常感谢任何帮助或建议！

Answer 1

您可以收集给定对象中的所有总计并收集行和列以及缺失的行，然后迭代行和列并使用给定数据构建表。

＆＃13;

var data = { "2017-05-06": { 13: { Chris: "2", Ian: "3" }, 14: { Chris: "4", Rob: "4" }, 16: { Ian: "3", Rob: 2 } } };

Object.keys(data).forEach(function (k) {
    var table = document.createElement('table'),
        rows = [],
        cols = Object.keys(data[k])
            .sort(function (a, b) { return a - b; })
            .reduce(function (r, a) {
                var i = +r[r.length - 1];
                while (++i < a) {
                    r.push(i.toString());
                }
                r.push(a);
                return r;
            }, []);

    data[k].total = { total: 0 };

    cols.forEach(function (l) {
        var sub = data[k][l] || {};
        Object.keys(sub).forEach(function (m) {
            if (rows.indexOf(m) === -1) {
                rows.push(m);
            }
            data[k].total[m] = (data[k].total[m] || 0) + +sub[m];
            data[k].total.total += +sub[m];
            sub.total = (sub.total || 0) + +sub[m];
        });
    });

    cols.unshift('');
    cols.push('total');
    rows.unshift('');
    rows.push('total')
    rows.forEach(function (r) {
        var tr = document.createElement('tr');
        cols.forEach(function (c) {
            var t = document.createElement(r && c ? 'td' : 'th'),
                v = r && c ? (data[k][c] || {})[r] || 0 : r || c;

            t.appendChild(document.createTextNode(v));
            if (v == +v) {
                t.style.textAlign = 'right';
            }
            tr.appendChild(t);
        });
        table.appendChild(tr);
    });
    document.body.appendChild(document.createTextNode(k));
    document.body.appendChild(document.createElement('br'));
    document.body.appendChild(table);
});

＆＃13;

Answer 2

我首先创建两个数组，一个用于行，一个用于列，包含要显示的所有行和列标题/键。然后迭代行数组/ col数组以构建一个表，如果有行+ col的数据写入，否则写入零。保持总变量的总和。

var data = {
  "2017-05-06": {
    "13": {"Chris": "2", "Ian": "3"}, 
    "14": {"Chris": "4", "Rob": "4"}, 
    "16": {"Ian": "3", "Rob": 2}
  }
};

var d = data['2017-05-06'];

var keys = Object.keys(d).sort();
// from the lowest and highest "hours" values, create an array containing everything in between too
var hours = [];
for (var i = keys[0]; i <= keys[keys.length - 1]; i++) {
  hours.push(i);
}

// get the unique names
var names = [];
for (var k in d) {
  for (var l in d[k]) {
    if (names.indexOf(l) === -1) names.push(l);
  }
}
var colTotals = {'total':0};
var tbl = "<table><thead><tr><th>Name</th>";
for (var i=0,h; h = hours[i]; i++) {
  tbl += "<th>" + h + "</th>";
  colTotals[h] = 0;
}
tbl += "<th>Total</th></tr></thead><tbody>";
for (var i=0,n; n = names[i]; i++) {
  tbl += "<tr><td>" + n + "</td>";
  var total = 0;
  for (var j=0,h; h = hours[j]; j++) {
    tbl += "<td>";
    // if data contains values for this row/col, add to total and table, otherwise put a zero
    if (d[h] && d[h][n]) {
      total += (d[h][n] - 0);
      colTotals[h] += (d[h][n] - 0);      
      
      tbl += d[h][n];
    } else {
      tbl += "0";
    }
    tbl += "</td>";
  }
  colTotals['total'] += total;
  tbl += "<td>" + total + "</td></tr>";
}
tbl += "<tr><td></td>";
for (var i=0,h; h = hours[i]; i++) {
  tbl += "<td>" + colTotals[h] + "</td>";
}
tbl += "<td>" + colTotals['total'] + "</td></tr>";
tbl += "</tbody></table>";

document.getElementById('t').innerHTML = tbl;

<div id='t'></div>

Answer 3

我的解决方案是将最小时和最大小时作为列名取出，并检索不同的名称作为行的名称，然后循环行和列并将数据从数据对象添加到表中，如果没有数据，则默认为0。

var jsonData = `{
  "2017-05-06": {
    "13": {
      "Chris": "2", "Ian": "3"
    },
    "14": {
      "Chris": "4", "Rob": "4"
    },
    "16": {
      "Ian": "3", "Rob": 2
    }
  }
}`;

var objData, obj, arrName, arrHour, minHour, maxHour,
    table, row, cell, caption;

objData = JSON.parse(jsonData);
obj = objData["2017-05-06"];

arrHour = Object.keys(obj);
minHour = Math.min(...arrHour);
maxHour = Math.max(...arrHour);

arrName = [];

for (let i in obj) {
  for (let j in obj[i]) {
    if (!arrName.includes(j)) {
      arrName.push(j);
    }
  }
}

table = document.createElement("table");
table.cellPadding = 2;
table.style.fontFamily = "monospace";
table.style.textAlign = "center";

caption = table.createCaption();
caption.innerText = "2017-05-06";
caption.style.textAlign = "left";
row = table.insertRow();
row.insertCell();

for (let i = minHour; i <= maxHour; i++) {
  cell = row.insertCell();
  cell.innerText = i;
}

cell = row.insertCell();
cell.innerText = "Tt";

for (let i = 0; i < arrName.length; i++) {
  let totalRow = 0;

  row = table.insertRow();
  cell = row.insertCell();
  cell.style.textAlign = "left";
  cell.innerText = arrName[i];
  
  for (let j = minHour; j <= maxHour; j++) {
    cell = row.insertCell();

    if (obj[j] !== undefined) {
      if (obj[j][arrName[i]] !== undefined) {
        cell.innerText = obj[j][arrName[i]];
        totalRow += +obj[j][arrName[i]];
      }
      else {
        cell.innerText = 0;
      }
    }
    else {
      cell.innerText = 0;
    }
  }
  
  cell = row.insertCell();
  cell.innerText = totalRow;
}

row = table.insertRow();
row.innerText = "Total";

for (let i = 0; i <= maxHour - minHour + 1; i++) {
  let totalCol = 0;
  cell = row.insertCell();

  for (let j = 0; j < arrName.length; j++) {
    totalCol += +table.rows[j + 1].cells[i + 1].innerText;
  }

  cell.innerText = totalCol;
}

document.body.appendChild(table);

填充了空格的表格式的JSON

3 个答案: