[英]How to use jQuery to render a JSON tree as nested HTML using divs?
I am looking for a way to render a JSON tree using nested <div>
as mentioned in the title. 我正在寻找一种方法来使用标题中提到的嵌套<div>
来呈现JSON树。 Here is a sample of the data (there is a max of 8 levels in the tree): 以下是数据示例(树中最多有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
}
I can get/parse the JSON tree and save it to a variable. 我可以获取/解析JSON树并将其保存到变量中。 Now I need to traverse the tree recursively and either: 现在我需要以递归方式遍历树并且:
div
node and add to a new tree. 创建一个新的div
节点并添加到新树。 But how? 但是怎么样?
You could do this in raw JS with little to no difficulty: 你可以在原始的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;
}
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. 只需使用您的对象调用该函数,它就会将HTML作为一组嵌套列表返回 - 您可以将其更改为仅使用<div>
s(如果您愿意)。
EDIT: And here's a version that uses DOM elements and returns a node that can be inserted with appendChild
or similar: 编辑:这是一个使用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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.