javascript - JSON 到表格格式并填充空白

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

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

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