Tôi muốn tạo một cây HTML (tốt hơn là UL-LI) từ ví dụ JSON bên dưới. Có ai có đơn giản, hàm đệ quy JS (không phải là một khung công tác) có thể xử lý cấu trúc cụ thể này không? Cảm ơn bạn đã giúp đỡ!Chuyển đổi JSON sang HTML Tree
{ "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;
}
Nên biết trước: kiểm tra Không có lỗi! Nếu một 'tiêu đề' hoặc 'thư mục' bị thiếu, toàn bộ điều có thể nổ tung.
Chúc mừng,
@Boldewyn: Tôi tin rằng bạn cũng có thể sử dụng một Đối ... Trong vòng lặp thay vì thường xuyên Đối với vòng lặp để rút ngắn đoạn code một chút. Tất nhiên, tôi không có nhiều kinh nghiệm sử dụng loại vòng lặp này, vì vậy hãy kiểm tra đoạn mã của tôi.
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));
}
}
Tôi gặp sự cố khi trình duyệt của mình chấp nhận cấu trúc dữ liệu do OP gửi, nhưng đây là một ví dụ làm việc đầy đủ mà tôi đã soạn thảo cho mục đích tương tự. Bên cạnh hàm tôi cũng cung cấp cấu trúc dữ liệu, với tên/nhánh thay vì tiêu đề/thư mục.
<html>
<head>
<script>
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));
}
</script>
</head>
<body onload="renderTree()">
<div id="tree"></div>
</body>
</html>
Tôi đã sử dụng PURE với một số thành công trong quá khứ cho loại điều này.
Kiểm tra plugin jquery JSON2HTML, nó đơn giản hơn một chút so với PURE và tôi đã sử dụng nó trên một vài trang web mà tôi đã tạo.
không thành công, vui lòng cập nhật liên kết – wilsonrufus
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;
}
Nó cũng còn thiếu thêm li vào ul. Thêm một ul.appendChild (li) trước khi đóng vòng lặp và nó sẽ hoạt động. –
Ngoài ra còn có một vấn đề với tính hợp lệ: Tiêu đề của UL chỉ được nối thêm vào nó. Đây là cái gì đó không phải là khá hữu ích. – Boldewyn
OK, đã được giải quyết! Không có tiêu đề để đi với UL. – Boldewyn