Baumansicht mit JSON generieren

Question

Ich möchte Strukturansicht mit jQuery und JSON generieren.

Meine JSON (Einzel Ordner):

[{"id":"076ac97d","path":"\/test\/undefined","name":"undefined","parentDirName":"test","parentDirId":"70b77ddd-6c15"}, .... ] 

Wenn Ordner in Wurzel, parentDirId Schlüssel leeren Wert hat: "", wenn im Katalog ist, hat eine ID Elternteil.

Ich möchte ul li Liste Baum generieren.

Haben Sie eine Idee, wie man in diesem JSON iteriert und ul li-Liste an html anfügt?

Ich habe eine AJAX:

$.ajax({ 
    type: "GET", 
    url: ajaxUrl, 
    dataType: "json", 
    contentType: "application/json", 

    success: function(response){ 
    //code 
    } 

Wie dir Baum generieren? Fügen Sie zuerst dirs an dirs mit parentID an.

Answer 1

Ich vermute, Sie so etwas wie dieses

function listItem(obj) { 
 
    var html = "<ul>" 
 
    jQuery.each(obj, function(key, value) { 
 
    html += "<li>" + key + ':' 
 
    if (typeof value !== "object") 
 
     html += value 
 
    else 
 
     html += listItem(value) 
 
    html += "</li>" 
 
    }) 
 
    return html + "</ul>" 
 
} 
 

 
var obj = { 
 
    "id": "076ac97d", 
 
    "rawr": { 
 
    "mew": 2 
 
    }, 
 
    "path": "\/test\/", 
 
    "name ": "undefined", 
 
    "parentDirName ": "test", 
 
    "parentDirId ": "70 b77ddd " 
 
}; 
 
document.write(listItem(obj));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

könnte bedeuten, Sie haben die Funktion unten. Es erstellt zuerst eine neue Objektstruktur, die von id codiert wird, die eine schnelle Suche des übergeordneten Elements jedes Knotens ermöglicht. Gleichzeitig wird für jedes Element ein Element LI zusammen mit einem leeren Element UL erstellt. Schließlich werden alle diese LI und UL Elemente miteinander verbunden sind, nach dem Eltern-Kind-Beziehung:

function populateUL($ul, data) { 
 
    // Register the given UL element as the root in a new data structure 
 
    var hash = { 
 
     "": { $ul: $ul } 
 
    }; 
 
    // Key the objects by their id, and create individual LI elements for them, 
 
    // and an empty UL container for their potential child elements 
 
    data.forEach(function (o) { 
 
     var $ul = $("<ul>"); 
 
     hash[o.id] = { 
 
      $ul: $ul, 
 
      $li: $("<li>").text(o.name).append($ul) 
 
     }; 
 
    }); 
 
    // Append each LI element to the correct parent UL element 
 
    data.forEach(function (o) { 
 
     hash[o.parentDirId].$ul.append(hash[o.id].$li); 
 
    }); 
 
} 
 

 
// Sample response object 
 
var response = [{ 
 
    "id":"70b77ddd-6c15", 
 
    "path":"/test", 
 
    "name":"test", 
 
    "parentDirName":"", 
 
    "parentDirId":"" 
 
}, { 
 
    "id":"076ac97d", 
 
    "path":"/test/chess", 
 
    "name":"chess", 
 
    "parentDirName":"test", 
 
    "parentDirId":"70b77ddd-6c15" 
 
}, { 
 
    "id":"076ac97e", 
 
    "path":"/test/bingo", 
 
    "name":"bingo", 
 
    "parentDirName":"test", 
 
    "parentDirId":"70b77ddd-6c15" 
 
}, { 
 
    "id":"076ac97f", 
 
    "path":"/test/chess/major pieces", 
 
    "name":"major pieces", 
 
    "parentDirName":"chess", 
 
    "parentDirId":"076ac97d" 
 
}, { 
 
    "id":"076ac97g", 
 
    "path":"/test/chess/major pieces/rook", 
 
    "name":"rook", 
 
    "parentDirName":"major pieces", 
 
    "parentDirId":"076ac97f" 
 
}, { 
 
    "id":"076ac97h", 
 
    "path":"/test/chess/major pieces/queen", 
 
    "name":"queen", 
 
    "parentDirName":"major pieces", 
 
    "parentDirId":"076ac97f" 
 
}, { 
 
    "id":"076b0000", 
 
    "path":"/test/chess/minor pieces", 
 
    "name":"minor pieces", 
 
    "parentDirName":"chess", 
 
    "parentDirId":"076ac97d" 
 
}, { 
 
    "id":"076b0001", 
 
    "path":"/test/chess/minor pieces/knight", 
 
    "name":"knight", 
 
    "parentDirName":"minor pieces", 
 
    "parentDirId":"076b0000" 
 
}, { 
 
    "id":"076b0002", 
 
    "path":"/test/chess/minor pieces/bishop", 
 
    "name":"bishop", 
 
    "parentDirName":"minor pieces", 
 
    "parentDirId":"076b0000" 
 
}]; 
 

 
// Inject response data into document 
 
populateUL($("#root"), response);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="root"></ul>

Damit dies funktioniert, das Wurzelelement muss für durch einen leeren String referenziert werden parentDirId.

Beachten Sie, dass die Eigenschaften Pfad und parentDirName nicht in diesem Algorithmus verwendet werden, da sie Informationen enthalten, die redundant ist.