如何使用 jQuery 将 JSON 树呈现为使用 div 的嵌套 HTML？

Posted 2023-03-31

【中文标题】如何使用 jQuery 将 JSON 树呈现为使用 div 的嵌套 HTML？

【英文标题】：How to use jQuery to render a JSON tree as nested HTML using divs?

【发布时间】：2012-11-12 16:08:32

【问题描述】：

我正在寻找一种使用嵌套 <div> 来呈现 JSON 树的方法，如标题中所述。这是一个数据样本（树中最多有 8 个级别）：

    "children": 
        "Bacteria": 
            "children":
                "Verrucomicrobia":
                    "children":
                        "Methylacidiphilae":
                            "children":
                                "Methylacidiphilales":
                                    "children":,
                                    "count":2,
                                    "level":"order",
                                    "name":"Methylacidiphilales",
                                    "score":1.46
                                
                            ,
                            "count":2,
                            "level":"class",
                            "name":"Methylacidiphilae",
                            "score":1.46
                        
                    ,
                    "count":2,
                    "level":"phylum",
                    "name":"Verrucomicrobia",
                    "score":1.46
                
            ,
            "count":2,
            "level":"kingdom",
            "name":"Bacteria",
            "score":1.46
        
    ,
    "count":0,
    "level":"root",
    "name":"Root",
    "score":0.0

我可以获取/解析 JSON 树并将其保存到变量中。现在我需要递归遍历树，并且：

将每个节点制作成可以呈现为 html 的内容。 创建一个新的div 节点并添加到一个新树中。

但是怎么做呢？

【问题讨论】：

我已经注意到 Node.js，但现在想避免这种情况，以便学习更多 jQuery。

1.请编辑问题并格式化 JSON，使其明显类似于您想要的。 2. 到目前为止你尝试过什么？

我试过这个：pastie.org/5370834。布局没问题，但切换会影响错误的节点。恐怕代码很笨拙。

【参考方案1】：

您可以在原始 JS 中轻松做到这一点：

function json2html(json) 
    var i, ret = "";
    ret += "<ul>";
    for( i in json) 
        ret += "<li>"+i+": ";
        if( typeof json[i] === "object") ret += json2html(json[i]);
        else ret += json[i];
        ret += "</li>";
    
    ret += "</ul>";
    return ret;

只需使用您的对象调用该函数，它就会将 HTML 作为一组嵌套列表返回 - 如果您愿意，当然可以将其更改为仅使用 <div>s。

编辑：这是一个使用 DOM 元素并返回可以使用 appendChild 或类似名称插入的节点的版本：

function json2html(json) 
    var i, ret = document.createElement('ul'), li;
    for( i in json) 
        li = ret.appendChild(document.createElement('li'));
        li.appendChild(document.createTextNode(i+": "));
        if( typeof json[i] === "object") li.appendChild(json2html(json[i]));
        else li.firstChild.nodeValue += json[i];
    
    return ret;