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

我正在寻找一种方法来使用标题中提到的嵌套

来呈现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树并将其保存到变量中。 现在我需要以递归方式遍历树，并且：

1. 使每个节点成为可以呈现为HTML的东西。
2. 创建一个新的div节点并添加到新树。

但是怎么样？

Answer 1

你可以在原始的JS中做到这一点，几乎没有困难：

 function json2html(json) { var i, ret = ""; ret += "
"; for( i in json) { ret += "
"+i+": "; if( typeof json[i] === "object") ret += json2html(json[i]); else ret += json[i]; ret += "
"; } ret += "
"; return ret; } 

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

。

编辑：这是一个使用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; }