creating dynamic folder Hierarchy from json data using JavaScript or JQuery

Question

MY jSon data Strucutre :

     var data = {
            "FolderList": [
                        {
                            "FolderID": 1,
                            "FolderName": "parent1",
                            "ParentFolderID": -1
                        },
                        {
                            "FolderID": 2,
                            "FolderName": "parent1 Child1",
                            "ParentFolderID": 1
                        },
                        {
                            "FolderID": 3,
                            "FolderName": "parent2",
                            "ParentFolderID": -1
                        },
                        {
                            "FolderID": 4,
                            "FolderName": "parent1 Child1 Child1",
                            "ParentFolderID": 2
                        },
                        {
                            "FolderID": 5,
                            "FolderName": "parent1 Child1 Child2",
                            "ParentFolderID": 2
                        },
                        {
                            "FolderID": 6,
                            "FolderName": "parent2 Child1",
                            "ParentFolderID": 3
                        }
                ]
                    };

Now, I wanted to do create folder hierarchy html like this:

 parent1
    parent1 child1
      parent1 child1 child1
      parent1 child1 child2   
 parent2
    parent2 child1

Actually I wanted to generate HTML code like this

<ul>
    <li>Parent1
        <ul>
             <li>parent1 child1
                 <ul>
                     <li>parent1 child1 child1</li>
                     <li>parent1 child1 child2</li>
                 </ul>
             </li>
         </ul>
    </li>
    <li>parent2
        <ul>
            <li>parent2 child1</li>
        </ul>
    </li>
</ul>

How can I do this using JavaScript or jQuery? Thanks in advance. I tried to use recursive function but got stucked in the middle. However my code is like this:

        function populatedata() {
             $.each(data.FolderList, function (i, folder) {
                if (folder.ParentFolderID == -1) {
                    html += '<li>' + folder.FolderName;
                    checkChild(folder.FolderID);
                    html += '</li>';
                }

            });
        }

        function checkChild(parentid) {
            $.each(data.FolderList, function (i, folder) {

                if (folder.ParentFolderID == parentid) {
                    html += '<li><ul>' + folder.FolderName;
                    checkChild(folder.FolderID);
                    html+=</ul></li>
                    return html;
                }
                else {
                    return ;
                }
            });
        }

Finally with below code by help of FAngel, I created required strucucture actually needed in my project

My modified code is like this:

      function populatedata() {
        var list = $("<ul>").attr({ class: "collapsibleList", id: "folder" });
             $.each(data.FolderList, function (i, folder) {
                 if (folder.ParentFolderID == -1) {
                   var item = $("<li>").
                   css("border-top","0").html('<span>'+folder.FolderName
                   +'</span><a href="Docs.html">
                   <div class="view-docs pull-right">View</div></a>');
                    list.append(item);
                    var children = $('<ul>');
                    item.append(children);
                    checkChild(folder.FolderID, children);
                  }
              });
              $('#folderList').append(list);
           }
         function checkChild(parentid, parent) {
              $.each(data.FolderList, function (i, folder) {
                if (folder.ParentFolderID == parentid) {
                    var item = $("<li>").
                        html('<span>'+folder.FolderName
                         +'</span><a href="Docs.html">
                           <div class="view-docs pull-right">View</div></a>');
                    var children = $('<ul>');
                    parent.append(item);
                    item.append(children);
                    checkChild(folder.FolderID, children);
                       }
                 else {
                    return;
                }
             });
         }

If you tried recursive function, maybe you should show it? So people here will be able to show your mistakes and not write a code from the scratch for you. — Viktor S.
– Viktor S., Commented Dec 25, 2012 at 9:26
@FAngel , I have edited and posted what i have tried. As I am new in development field, I couldn't go more . Still I am trying myself too. Thanks — Lasang
– Lasang, Commented Dec 25, 2012 at 10:09

Viktor S. · Accepted Answer · 2012-12-25 10:37:16Z

Here is demo for it: http://jsfiddle.net/zn2C7/7/

   var list = $("<ul>");
   function populatedata() {
         $.each(data.FolderList, function (i, folder) {                
            if (folder.ParentFolderID == -1) {
                var item = $("<li>").html(folder.FolderName);

                list.append(item);
                var children = $('<ul>');
                item.append(children);
                checkChild(folder.FolderID, children);                    
            }

        });
        $('body').append(list);
    }

    function checkChild(parentid, parent) {
        $.each(data.FolderList, function (i, folder) {
            if (folder.ParentFolderID == parentid) {
                var item = $("<li>").html(folder.FolderName);                    
                var children = $('<ul>');
                parent.append(item);
                item.append(children);
                checkChild(folder.FolderID, children);                    
            }
            else {
                return ;
            }
        });
    }

It was possible to build it using html variable, like you tried to do that, but it is much simpler to use DOM manipulation functions of jQuery ($('<ul>') and $('<li>') - create new element, .append() - append element to some other element)

function checkChild(parentid) {
            $.each(data.FolderList, function (i, folder) {

                if (folder.ParentFolderID == parentid) {
                    html += '<li><ul>' + folder.FolderName;
                    checkChild(folder.FolderID);
                    html+=</ul></li>
                    return html;
                }
                else {
                    return ;
                }
            });
        }

Also, please note that in code above you are doing return html; from each function callback. Not sure what you wanted to get exactly, but in .each it may work like break in regular loop (if you will return false):

We can stop the loop from within the callback function by returning false.

That is from jquery api page.

Also, for such tasks I prefer to use debugger. At this moment there are a lot of powerful tools for HTML/CSS/JS debugging in browser. Just press F12 in Chrome, IE or FF (for the last one you may need to install Firebug extension) and you will get a lot of helpful features along with simple JS debugging.

I am very thankful to you for your help. Because of you, I got to knew about DOM manipulation after looking more about it. I solved my problem. Thanks a lot

Lasang · Accepted Answer · 2012-12-28 12:38:58Z

I have updated the code and solved in following way. The code will not create unnecessary ul element if it has no any li element .i.e. no ul if parent has no child.

 function populateFolder() {
    var list = $("<ul>").attr({ class: "collapsibleList", id: "folder" });
    $.each(data.FolderList, function (i, folder) {
        if (folder.ParentFolderID == -1) {
            var item = $("<li>").html('<span>' + folder.FolderName +
                        '</span><a href="Docs.html">
                        <div class="view-docs pull-right">View</div></a>');
            checkChild(folder.FolderID, item);
            list.append(item);
    });
    $('#anydiv').append(list);

}

function checkChild(parentid, parent) {
    $.each(data.FolderList, function (i, folder) {
       if (folder.ParentFolderID == parentid) {
          var children = $('<ul>');
          var item = $("<li>").html('<span>' + folder.FolderName 
                    + '</span><a href="Docs.html">
                    <div class="view-docs pull-right">View</div></a></li>');
        children.append(item);
        checkChild(folder.FolderID, item);
        parent.append(children);
    }
    else 
        return;
  });
}

Collectives™ on Stack Overflow

creating dynamic folder Hierarchy from json data using JavaScript or JQuery

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related