CODEWITHSUNDEEP
javascriptjqueryjson
Dominik
Dominik

Reputation: 1335

Generate tree view using json

I want to generate tree view using jQuery and JSON.

My JSON(single folder):

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

When folder is in root, parentDirId key has empty value: "", if is in catalog, has a parent ID.

I want to generate ul li list tree.

Do you have an idea how to iterate in this JSON and append ul li list to html?

I have an AJAX:

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

    success: function(response){
    //code
    }

How to generate dir tree? Firstly append dirs to dirs with parentID.

Upvotes: 0

Views: 2199

Answers (2)

trincot
trincot

Reputation: 350262

You could use the function below. It first creates a new object structure keyed by id, which allows quick lookup of the parent of each node. At the same time it creates an LI element for each of them, together with an empty UL element. Finally all these LI and UL elements are linked together according to the parent-child relationship:

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>

For this to work, the root element must be referenced by an empty string for parentDirId.

Note that the properties path and parentDirName are not used in this algorithm, since they contain information that is redundant.

Upvotes: 2

Tezra
Tezra

Reputation: 8833

I'm guessing you mean something like this

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>

Upvotes: 0

Related Questions