Question

我试图想出从下面的JSON对象生成表的最佳方法：

mytable=[
    {div:{
        nested:[
            {table:{
                nested:[
                    {thead:{
                        nested:[
                            {tr:{
                                nested:[
                                    {th:{}},
                                    {th:{}},
                                    {th:{}}
                                ]}}
                        ]
                    }},
                    {tbody:{}}
                ]}}
        ]}}
];

最终结果将生成HTML元素，结构如下：

<div>
    <table>
        <thead>
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

我的逻辑是检查对象是否具有属性nested，如果这样生成元素并继续循环，但是我无法弄清楚如何将子元素绑定回到父母在同一时间。

Answer 1

这是有效的：

var mytable = /* your json */

function toHTML(j, n) {

    n = n || document.createDocumentFragment('div');
    for (var i = 0, o, l = j.length; i < l; i++) {
        for (var tag in j[i]) {
            o = document.createElement(tag);
            n.appendChild(o);
            'nested' in j[i][tag] && toHTML(j[i][tag].nested, o);
        }
    }
    return n;
}
var res = toHTML(mytable);

// now append it where needed
document.body.appendChild(res);

从JSON对象生成结构化HTML

1 个答案: