如何使用jQuery将JSON树渲染为使用div的嵌套HTML？ [英] How to use jQuery to render a JSON tree as nested HTML using divs?

问题描述

我正在寻找一种使用标题中提到的嵌套< div> 的JSON树。这里是一个数据样本（树中最多有8个层次）：

  {
儿童：{
细菌：{
儿童：{
Verrucomicrobia：{
children：{
Methylacidiphilae：{
children：{
Methylacidiphilales：{
children：{}，
count：2，
level：order， 
name：Methylacidiphilales，
分数：1.46 
} 
}，
count：2，
等级： class，
name：Methylacidiphilae，
分数：1.46 
 } 
}，
count：2，
level：phylum，
name：Verrucomicia，
score：1.46 
 
 $ count $ b $ level 
 $ level $ b $ name 
 $ b $分数：1.46 
} 
}，
count：0，
level：root，
name：Root，
score：0.0 
} 
  

我可以得到/解析JSON树并保存到一个变量。现在我需要递归地遍历树：

1. 使每个节点都可以呈现为HTML格式。


2. 创建一个新的 div 节点并添加到新树中。
   

但是怎么样？

解决方案

b
$ b

 函数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; 
} 
  

I am looking for a way to render a JSON tree using nested <div> as mentioned in the title. Here is a sample of the data (there is a max of 8 levels in the tree):

{
    "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
}

I can get/parse the JSON tree and save it to a variable. Now I need to traverse the tree recursively and either:

1. Make each node into something that can be rendered as HTML.
2. Create a new div node and add to a new tree.

But how?

解决方案

You could do this in raw JS with little to no difficulty:

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

Just call that function with your object, and it will return the HTML as a set of nested lists - you can of course change it to use just <div>s if you prefer.

EDIT: And here's a version that uses DOM elements and returns a node that can be inserted with appendChild or similar:

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

这篇关于如何使用jQuery将JSON树渲染为使用div的嵌套HTML？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！