Wie verwendet man jQuery, um einen JSON-Baum als verschachtelten HTML mit divs zu rendern?

Question

Ich bin auf der Suche nach einer Möglichkeit, einen JSON-Baum mit verschachtelten <div> wie im Titel erwähnt zu rendern. Hier ist ein Beispiel der Daten (ein Maximum von 8 Ebenen in dem Baum ist):

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

ich bekommen kann/analysieren, um den JSON Baum und speichern Sie es auf eine Variable. Jetzt muss ich den Baum rekursiv durchlaufen und entweder:

1. Machen Sie jeden Knoten in etwas, das als HTML gerendert werden kann.
2. Erstellen Sie einen neuen div Knoten und fügen Sie ihn zu einem neuen Baum hinzu.

Aber wie?

Answer 1

Man könnte dies ohne Schwierigkeiten mit wenig roh JS tun:

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

Rufen Sie diese Funktion mit Ihrem Objekt, und es wird die HTML als eine Reihe von verschachtelten Listen zurückgeben - Sie natürlich ändern können es zu verwenden nur <div> s, wenn Sie bevorzugen.

EDIT: Und hier ist eine Version, die DOM-Elemente verwendet und gibt einen Knoten, der mit appendChild oder ähnlichem eingesetzt werden kann:

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