Jak używać jQuery do renderowania drzewa JSON jako zagnieżdżonego HTML za pomocą elementów div?

Question

Szukam sposobu renderowania drzewa JSON przy użyciu zagnieżdżonego <div>, jak wspomniano w tytule. Oto próbka danych (jest max 8 poziomów w drzewie):

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

mogę/analizowania drzewa JSON i zapisać go do zmiennej. Teraz muszę przechodzić przez drzewo rekursywnie i albo:

1. Dodać każdy węzeł do czegoś, co może być renderowane jako HTML. Utworzenie nowego węzła div i dodanie do nowego drzewa.

Ale jak?

Answer 1

Można to zrobić w surowej JS z niewiele ma trudności:

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

Wystarczy zadzwonić tej funkcji z obiektem i powróci HTML jako zbiór zagnieżdżonych list - można oczywiście zmianie jeśli chcesz, użyj tylko <div> s.

EDIT: I tu jest wersja, która wykorzystuje elementy DOM i zwraca węzeł, który może być wstawiony z appendChild lub podobne:

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