Ungeordnete Liste aus JSON-Daten generieren?

Ich möchte eine Baumansicht meiner JSON-Daten generieren. Daher wäre es schön, die zu analysieren JSON-Daten in ein mehrstufige (!) ungeordnete HTML-Liste. Ich habe ein paar Plugins gefunden, aber ich kann sie nicht dazu bringen, mit meinen JSON-Daten zu arbeiten.

Eine nette Lösung wäre ein Aufruf einer Funktion und die Übergabe der JSON-Daten als Parameter. Das Ergebnis könnte eine mehrstufige ungeordnete Liste sein. Ich gehe davon aus, dass die Funktion alle JSON-Daten durchlaufen und schreiben muss ul und li Stichworte.

Gibt es einen direkten Weg, dies zu tun?

tja!

PS: Beispielbäume (die mit meinen JSOn-Daten funktionieren):
http://braincast.nl/samples/jsoneditor/
http://www.thomasfrank.se/downloadableJS/JSONeditor_example.html

Nur ein kurzes einfaches Beispiel:

function tree(data) {    
    if (typeof(data) == 'object') {
        document.write('<ul>');
        for (var i in data) {
            document.write('<li>' + i);
            tree(data[i]);            
        }
        document.write('</ul>');
    } else {
        document.write(' => ' + data);
    }
}

jQuery-Version:

function tree(data) {    
    if (typeof(data) == 'object') {        
        var ul = $('<ul>');
        for (var i in data) {            
            ul.append($('<li>').text(i).append(tree(data[i])));         
        }        
        return ul;
    } else {       
        var textNode = document.createTextNode(' => ' + data);
        return textNode;
    }
}

$(document.body).append(tree(data));

Hier ist eine komplette reine Javascript-Lösung. Rekursives Durchlaufen des JSON-Objekts und Erstellen von ul und li’s, während Sie fortfahren. Es ist jedoch besser, dem DOM keine Elemente nacheinander hinzuzufügen.

HTML

 <ul id="JSONunorderedList"></ul> 

JAVASCRIPT

var jsonObj ={"labels":[ {"labelFont":"35pt Calibri","labelLocation":{"x":0.1483, "y":0.75},  "labelText":"fluffer"},{"labelFont":"35pt Calibri","labelLocation":{"x":0.666, "y":0.666},  "labelText":"nutter"}]}; //some json to display

var listEl =document.getElementById('JSONunorderedList');
makeList(jsonObj,listEl);

function makeList( jsonObject, listElement){
    for(var i in jsonObject){//iterate through the array or object
        //insert the next child into the list as a <li>
        var newLI = document.createElement('li');
        if  (jsonObject[i] instanceof Array){
            newLI.innerHTML=i+": ARRAY";
            newLI.className="arrayOrObject"; //add a class tag so we can style differently
        }
        else if (  jsonObject[i] instanceof Object){
            newLI.innerHTML=i+": OBJECT";
            newLI.className="arrayOrObject"; //add a class tag so we can style differently
        }
        else
            newLI.innerHTML=i+': '+jsonObject[i];
        listElement.appendChild(newLI);   
        //insert a <ul> for nested nodes 
        if  (jsonObject[i] instanceof Array || jsonObject[i] instanceof Object){
            var newUL = document.createElement('ul');
            //newUL.innerHTML=i;
            listElement.appendChild(newUL);
            makeList(jsonObject[i],newUL);
        }
    }
}

die Geige http://jsfiddle.net/honkskillet/LvMnG/

Haben Sie es mit PHP versucht und json_decode();

http://php.net/manual/en/function.json-decode.php

Dies würde Ihren JSON-String als Array in PHP zurückgeben und Sie können dann das Array durchlaufen, um Ihre UL > LI-Liste zu erstellen.

Nur eine Idee..