Come utilizzare jQuery per eseguire il rendering di un albero JSON come HTML nidificato utilizzando le div?

Question

Sto cercando un modo per eseguire il rendering di un albero JSON utilizzando nidificato <div> come indicato nel titolo. Ecco un esempio dei dati (c'è un massimo di 8 livelli nella struttura):

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

posso ottenere/analizzare l'albero JSON e salvarlo in una variabile. Ora ho bisogno di attraversare l'albero in modo ricorsivo e:

1. Trasforma ciascun nodo in qualcosa che può essere visualizzato come HTML.
2. Creare un nuovo nodo div e aggiungerlo a un nuovo albero.

Ma come?

Answer 1

Si potrebbe fare questo in JS crudo con poca o nessuna difficoltà:

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

basta chiamare quella funzione con l'oggetto, e restituirà il codice HTML come un insieme di liste annidate - si può di cambio di rotta per usare solo <div> se si preferisce.

EDIT: Ed ecco una versione che utilizza elementi DOM e restituisce un nodo che può essere inserito con appendChild o simile:

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