Databases
StackOverflow2013
Postsdbo
POcreating dynamic folder Hierarchy from json data using JavaScript or JQuery
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POcreating dynamic folder Hierarchy from json data using JavaScript or JQuery
    primarykey
    data
    text
    <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>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USLasang
    1. USLasang
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POcreating dynamic folder Hierarchy from json data using JavaScript or JQuery
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POcreating dynamic folder Hierarchy from json data using JavaScript or JQuery
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POcreating dynamic folder Hierarchy from json data using JavaScript or JQuery
      1. This table or related slice is empty.
      1. VTUpMod
    1. COIf 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.
      singulars
      1. POcreating dynamic folder Hierarchy from json data using JavaScript or JQuery
      1. USViktor S.
    2. CO@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
      singulars
      1. POcreating dynamic folder Hierarchy from json data using JavaScript or JQuery
      1. USLasang
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload