¿Cómo usar jQuery para renderizar un árbol JSON como HTML nested usando divs?

Estoy buscando una forma de renderizar un árbol JSON usando

nested como se menciona en el título. Aquí hay una muestra de los datos (hay un máximo de 8 niveles en el árbol):

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

Puedo obtener / analizar el árbol JSON y guardarlo en una variable. Ahora necesito atravesar el árbol recursivamente y:

  1. Convierta cada nodo en algo que pueda representarse como HTML.
  2. Crea un nuevo nodo div y agrégalo a un nuevo árbol.

¿Pero cómo?

Podrías hacer esto en raw JS con poca o ninguna dificultad:

 function json2html(json) { var i, ret = ""; ret += "
    "; for( i in json) { ret += "
  • "+i+": "; if( typeof json[i] === "object") ret += json2html(json[i]); else ret += json[i]; ret += "
  • "; } ret += "
"; return ret; }

Simplemente llame a esa función con su objeto, y devolverá el HTML como un conjunto de listas anidadas; por supuesto, puede cambiarlo para usar solo

s si lo prefiere.

EDITAR: Y aquí hay una versión que usa elementos DOM y devuelve un nodo que se puede insertar con appendChild o similar:

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