[英]Convert JSON to HTML Tree
I would like to generate an HTML tree (preferably UL-LI) from the JSON example below.我想从下面的 JSON 示例生成一个 HTML 树(最好是 UL-LI)。 Does anyone have a simple , recursive JS function (not a framework) that can handle this specific structure?
有没有人有一个简单的递归 JS 函数(不是框架)可以处理这个特定的结构? Thanks for your help!
谢谢你的帮助!
{ "folder" : [ {
"title" : "1",
"folder" : [ {
"title" : "1.1",
"folder" : [ {
"title" : "1.1.1",
} , {
"title" : "1.1.2",
} ]
} ]
} , {
"title" : "2",
} ] }
function to_ul (obj) {
// --------v create an <ul> element
var f, li, ul = document.createElement ("ul");
// --v loop through its children
for (f = 0; f < obj.folder.length; f++) {
li = document.createElement ("li");
li.appendChild (document.createTextNode (obj.folder[f].title));
// if the child has a 'folder' prop on its own, call me again
if (obj.folder[f].folder) {
li.appendChild (to_ul (obj.folder[f].folder));
}
ul.appendChild (li);
}
return ul;
}
Caveat: No error checking!警告:没有错误检查! If a 'title' or 'folder' is missing, the whole thing could blow up.
如果缺少“标题”或“文件夹”,整个事情可能会崩溃。
I had a problem getting my browser to accept the data structure submitted by the OP, but here is a fully working example I've drawn up for my own, similar purposes.我在让浏览器接受 OP 提交的数据结构时遇到了问题,但这是我为自己的类似目的编写的一个完整的示例。 Beside the function I provide the data structure as well, with name/branches instead of title/folder.
除了函数之外,我还提供了数据结构,使用名称/分支而不是标题/文件夹。
function to_ul(branches) { var ul = document.createElement("ul"); for (var i = 0, n = branches.length; i < n; i++) { var branch = branches[i]; var li = document.createElement("li"); var text = document.createTextNode(branch.name); li.appendChild(text); if (branch.branches) { li.appendChild(to_ul(branch.branches)); } ul.appendChild(li); } return ul; } function renderTree() { var treeEl = document.getElementById("tree"); var treeObj = { "root": [{ "name": "George & Sarah Trede", "branches": [{ "name": "George & Frances Trede", "branches": [{ "name": "Mary (Trede) Jempty" }, { "name": "Carol (Trede) Moeller" }] }, { "name": "Mary (Trede) Sheehan" }, { "name": "Ward Trede" }] }] }; treeEl.appendChild(to_ul(treeObj.root)); } renderTree()
<div id="tree"></div>
我过去曾在这种事情上使用过PURE并取得了一些成功。
Check out the jquery plugin JSON2HTML, it's a little simpler to use than PURE and I've used it on a couple of site's I've created.查看 jquery 插件 JSON2HTML,它使用起来比 PURE 简单一点,我已经在我创建的几个站点上使用了它。
function to_li(obj, name) {
var li = document.createElement("li");
if (typeof(name) != "undefined") {
var strong = document.createElement("strong");
strong.appendChild(document.createTextNode(name + ": "));
li.appendChild(strong);
}
if (typeof(obj) != "object"){
li.appendChild(document.createTextNode(obj));
} else {
var ul = document.createElement ("ul");
for (var prop in obj){
ul.appendChild(to_li(obj[prop],prop));
}
li.appendChild(ul);
}
return li;
}
@Boldewyn: I believe you can also use a For...In loop instead of a regular For loop to shorten the code a bit. @Boldewyn:我相信您也可以使用 For...In 循环而不是常规的 For 循环来稍微缩短代码。 Of course, I don't have much experience using this kind of loop, so please check my code snippet.
当然,我没有太多使用这种循环的经验,所以请检查我的代码片段。
for (var i in obj.folder) {
li = document.createElement ("li");
li.appendChild (document.createTextNode (i.title));
// if the child has a 'folder' prop on its own, call me again
if (i.folder) {
li.appendChild (to_ul (i.folder));
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.