creating dynamic folder Hierarchy from json data using JavaScript or JQuery
<p>MY jSon data Strucutre :</p>

<pre><code>     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
                        }
                ]
                    };
</code></pre>

<p>Now, I wanted to do create folder hierarchy html like this:</p>

<pre><code> parent1
    parent1 child1
      parent1 child1 child1
      parent1 child1 child2   
 parent2
    parent2 child1
</code></pre>

<p>Actually I wanted to generate HTML code like this </p>

<blockquote>
<pre><code>&lt;ul&gt;
    &lt;li&gt;Parent1
        &lt;ul&gt;
             &lt;li&gt;parent1 child1
                 &lt;ul&gt;
                     &lt;li&gt;parent1 child1 child1&lt;/li&gt;
                     &lt;li&gt;parent1 child1 child2&lt;/li&gt;
                 &lt;/ul&gt;
             &lt;/li&gt;
         &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;parent2
        &lt;ul&gt;
            &lt;li&gt;parent2 child1&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>
</blockquote>

<p>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:</p>

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

            });
        }

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

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

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

<p>My modified code is like this:</p>

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