jQueryを使用してdivを使用してJSONツリーをネストされたHTMLとしてレンダリングする方法は？

Question

タイトルで述べたようにネストされた<div>を使用してJSONツリーをレンダリングする方法を探しています。ここではデータのサンプルです（ツリー内の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 
} 

私は得ることができます

/JSONツリーを解析し、それを変数に保存します。今度は、ツリーを再帰的にトラバースする必要があります。

1. 各ノードをHTMLとしてレンダリングできるものにします。
2. 新しいdivノードを作成し、新しいツリーに追加します。

どのようにですか？

Answer 1

あなたは支障なくに少しで生JSでこれを行うことができます：ちょうどあなたのオブジェクトとその関数を呼び出して、それがネストされたリストのセットとしてHTMLを返します

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

- あなたが進路変更のことができます必要に応じて<div>秒を使用してください。

編集：私はNode.jsのを指摘している

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