JQuery Mobile multiple level (3 or 4 levels) Nested Listview with JSON Data

JQuery Mobile multiple level (3 or 4 levels) Nested Listview with JSON Data

Can anyone provide me a simple demo of jQuery Mobile, 3 to 4 levels of dynamic nested listview/treeview that takes in list details from nested JSON data present in the same HTML file?

Just 1 or 2 ul/li will do, I will try my best to figure the remaining myself!

I am new to both JSON and jQuery. I have spent plenty of time going through several examples in order to get this done.

These are a few links that I have tried to follow but failed as I do not know how to convert another version of jQuery to jQuery Mobile:

  1. http://jsfiddle.net/ezanker/7QTV9/5/
  2. http://jsfiddle.net/t5Hxk/5/

Below is my current JSON structure that I manage to produce:

var info = { [{ "id":1, "name":"Folder B", "img":"img/6.png", "my-hash":"hash-6", "my-url":"sample.html?request=page-6" }, { "id":2, "name":"Folder C", "img":"img/7.png", "branch":[{ "id":3, "name":"Folder C.1", "branch":[{ "id":4, "name":"Folder C.1.1", "my-hash":"hash-9", "my-url":"sample.php?request=page-9" }, { "id":5, "name":"Folder C.1.2", "my-hash":"hash-10", "my-url":"sample.html?request=page-10" }, { "id":6, "name":"file c.1.1", "my-hash":"hash-11", "my-url":"sample.html?request=page-11" }], "my-hash":"hash-8", "my-url":"sample.html?request=page-8" }, { "id":7, "name":"file c.1", "img":"img/12.png", "my-hash":"hash-12", "my-url":"sample.html?request=page-12" }], "my-hash":"hash-7", "my-url":"sample.html?request=page-7" }, { "id":8, "name":"file a", "img":"img/13.png", "my-hash":"hash-13", "my-url":"sample.html?request=page-13" }]

HTML:

<div data-role="content"><!-- ui-grid-c is for 1st level to show as button form --> <div class="ui-grid-c" id="policy-grid"> </div> <!-- the listview is for 2nd level onwards to show as collapsible list form --> <div id="thelist" data-role="collapsibleset"> </div> </div> 

Ok, the question is, provided that my JSON data is correctly structured, can anyone help me in writing a jQuery Mobile script that dynamically takes in data and produce list result as shown in this JQM demo

http://demos.jquerymobile.com/1.2.0/docs/lists/lists-nested.html

I will explain more if this is unclear. Will really appreciate any help. Thanks!