我正在寻找一种使用嵌套 <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
节点并添加到新树中。
但是如何呢?
最佳答案
您可以在原始 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;
}
关于javascript - 如何使用 jQuery 将 JSON 树呈现为使用 div 的嵌套 HTML?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13347158/