如何使用jQuery使用div呈現JSON樹作爲嵌套HTML？

我正在尋找一種方法來使用標題中提到的使用嵌套<div>的JSON樹。下面是數據的樣本（有樹8級的最大值）：如何使用jQuery使用div呈現JSON樹作爲嵌套HTML？

{ 
    "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節點並添加到新樹中。

但是怎麼樣？

來源

2012-11-12 maasha

我注意到Node.js的，但想避免，就目前而言，爲了學習更多的jQuery。 – maasha

1.請編輯問題並格式化JSON，以便它看起來與您想要的相似。 2.到目前爲止您嘗試過什麼？ –

我試過這個：http://pastie.org/5370834。佈局是可以的，但切換會影響錯誤的節點。我恐怕代碼笨拙。 – maasha

你可以用很少這樣做是原始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; 
}

來源

2012-11-12 16:14:30

如何使用jQuery使用div呈現JSON樹作爲嵌套HTML？

回答

相關問題