javascript - Multilevel list menu with JSON and jQuery Mobile -

i try reach following structure

a list of (distinct!) categories

• category 1
• category 2
• category n

and each category links posts within category. , posts link content

• post 1 cat 1 --> content post 1 cat 1
• post 2 cat 2 --> content post 2 cat 1

question: don't know how create distinct list of categories leads posts. solutions?

this json example (this json api plugin in wordpress)

{"status": "ok", "count": 10, "count_total": 20, "pages": 2, "posts": [     {         "id": 86,         "type": "post",         "slug": "inaktiviert",         "url": "http://localhost/wordpress/?p=86",         "status": "publish",         "title": "post 1 cat1",         "content": "his content post1 cat 1.",         "date": "2014-03-04 15:09:51",         "modified": "2014-03-04 15:09:51",         "categories": [             {                 "id": 1,                 "title": "category 1",                 "description": "",                 "parent": 0,                 "post_count": 4             }         ],     },     {         "id": 84,         "type": "post",         "slug": "kann-nicht-aktualisiert-werden",         "url": "http://localhost/wordpress/?p=84",         "status": "publish",         "title": "post 2 cat1",         "content": "<p>this content post2 cat 1.</p>\n",         "date": "2014-03-04 15:09:25",         "modified": "2014-03-04 15:09:25",         "categories": [             {                 "id": 1,                 "title": "category 1",                 "description": "",                 "parent": 0,                 "post_count": 4             }         ],     },         {             "id": 74,             "type": "post",             "slug": "dieses-symbol-zeigt-an",             "url": "http://localhost/wordpress/?p=74",             "status": "publish",             "title": "post 1 cat2",             "content": "this content post1 cat 2",             "date": "2014-03-04 15:06:47",             "modified": "2014-03-04 15:06:47",             "categories": [                 {                     "id": 2,                     "title": "category 2",                     "description": "",                     "parent": 0,                     "post_count": 3                 }             ],         }     ]} 

and js

$(document).on("pagecreate", "#page1", function(){     var liste = $('#liste');      var alllistitems = '';     var alldynamicpages = '';     $.each(daten.posts, function(index1, data) {         var postid = data.id;         var posttitle = data.title;         var postcontent = data.content;          (var = 0; i< data.categories.length; i++) {              var catid = data.categories[i].id;                  var cattitle = data.categories[i].title;                         alllistitems += '<li><a href="#page' + postid + '">' + posttitle + '</a></li>';                 alldynamicpages += '<div data-role="page" data-add-back-btn="true" id="page' + postid + '"><div data-role="header"><h1>' + posttitle + '</h1></div><div data-role="content">' + postcontent + '</div></div>'         }             });      liste.empty().append(alllistitems).listview("refresh");     $("body").append(alldynamicpages); }); 

demo

i approach way: instead of list, create collapsible set each child collapsible category, , each category collapsible contains list of posts.

here updated fiddle

so top level html markup collapsible set:

<div id="thelist" data-role="collapsibleset" data-theme="a" data-content-theme="a">        </div>   

then code:

var liste = $('#thelist'); var alldynamicpages = ''; $.each(daten.posts, function(index1, data) {     var postid = data.id;     var posttitle = data.title;     var postcontent = data.content;             (var = 0; i< data.categories.length; i++) {         var catid = data.categories[i].id;              var cattitle = data.categories[i].title;                     //see if have category, if not create new collapsible         var $cat = $("#cat" + catid);         if ($cat.length == 0){             $cat = $('<div id="cat' + catid + '" data-role="collapsible"><h3>' + cattitle + '</h3><ul data-role="listview"></ul></div>');                liste.append($cat);         }          //create post link in category collapsible list         var postlink = '<li><a href="#page' + postid + '">' + posttitle + '</a></li>';         $cat.find("ul").append(postlink);          alldynamicpages += '<div data-role="page" data-add-back-btn="true" id="page' + postid + '"><div data-role="header"><h1>' + posttitle + '</h1></div><div data-role="content">' + postcontent + '</div></div>'     }         });         liste.enhancewithin(); $("body").append(alldynamicpages); 

it same iteration had before, each category, check if there collapsible category. if there not create 1 , add set. create link post , add list widget within category collapsible.

finally call .enhancewithin() apply jqm styling.

the dynamic pages part stays same.