Làm thế nào để sử dụng jQuery để hiển thị một cây JSON như HTML lồng nhau bằng cách sử dụng div?

Question

Tôi đang tìm cách hiển thị cây JSON bằng cách sử dụng lồng nhau <div> như được đề cập trong tiêu đề. Đây là mẫu dữ liệu (có tối đa 8 cấp độ trong cây):

{ 
    "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 
} 

Tôi có thể nhận/phân tích cú pháp cây JSON và lưu nó vào một biến. Bây giờ tôi cần phải đi qua cây một cách đệ quy và:

1. Làm cho mỗi nút thành một thứ có thể được hiển thị dưới dạng HTML.
2. Tạo nút div mới và thêm vào cây mới.

Nhưng làm cách nào?

Answer 1

Bạn có thể làm điều này trong tình trạng thô JS với ít hoặc không có khó khăn:

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; 
} 

Chỉ cần gọi hàm với đối tượng của bạn, và nó sẽ trở lại với HTML như một tập hợp các danh sách lồng nhau - bạn có thể thay đổi nhiên nó chỉ sử dụng <div> s nếu bạn thích.

EDIT: Và đây là một phiên bản có sử dụng các yếu tố DOM và trả về một nút đó có thể được chèn với appendChild hoặc tương tự:

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; 
}