这里空白格式化是我的JSON的例子：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
我不知道从哪里开始，所以真的很感谢任何帮助或建议！
我会首先制作两个数组，一个用于行，另一个用于列，它包含您要显示的所有行和列标题/键。然后迭代行数组/列数组来构建一个表，如果有数据为行+列编写，否则写入零。保持总变量总和。
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>你可以收集给定对象的所有总量和收集的行和列，以及缺少的，然后重复的行和列，并与给定的数据创建表。
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);
});我的解决办法是我拿出分钟小时，最大小时作为列名，并获取不同的名称，该行的名称，然后循环的行和列从数据对象数据添加到该表中，如果没有数据，默认值为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);
谢谢，@James - 当我实现它时，我非常喜欢这种方法，并且发现它也很容易扩展。 –