Dynamic collapsible set content based on dynamic section in jQuery mobile -

i have json like

[ {     "sid": "1",     "webform_views_add_sublocation_form_tour_name": "4",     "webform_views_add_sublocation_form_location": "location1",     "webform_views_add_sublocation_form_sub_location": "sublocation1" }, {     "sid": "2",     "webform_views_add_sublocation_form_tour_name": "4",     "webform_views_add_sublocation_form_location": "location2",     "webform_views_add_sublocation_form_sub_location": "sublocation1" }, {     "sid": "3",     "webform_views_add_sublocation_form_tour_name": "4",     "webform_views_add_sublocation_form_location": "location1",     "webform_views_add_sublocation_form_sub_location": "sublocation2" }, {     "sid": "4",     "webform_views_add_sublocation_form_tour_name": "4",     "webform_views_add_sublocation_form_location": "location1",     "webform_views_add_sublocation_form_sub_location": "sublocation3" }, {     "sid": "5",     "webform_views_add_sublocation_form_tour_name": "4",     "webform_views_add_sublocation_form_location": "location2",     "webform_views_add_sublocation_form_sub_location": "sublocation2" }, {     "sid": "8",     "webform_views_add_sublocation_form_tour_name": "4",     "webform_views_add_sublocation_form_location": "location1",     "webform_views_add_sublocation_form_sub_location": "sublocation4" }, {     "sid": "10",     "webform_views_add_sublocation_form_tour_name": "6",     "webform_views_add_sublocation_form_location": "location2",     "webform_views_add_sublocation_form_sub_location": "sublocation3" }] 

i want load json colapsible set location section part , sublocation content part.

$(document).on('pageshow','#locations' ,function(event, ui){ var tourid = $.urlparam('tourid'); $('#location-list').empty();          $.getjson('url', function(data) {              $.each(data,function(i,row){                  if(tourid == row.webform_submissions_webform_views_add_sublocation_form__webf){             $('#location-list').append('<div data-role="collapsible"><h3>'+row.webform_submissions_webform_views_add_sublocation_form__webf_1+'</h3><ul data-role="listview"><li><a href="#">'+row.webform_submissions_webform_views_add_sublocation_form__webf_2+'</a></li></ul></div>');             $('#location-list').collapsibleset('refresh');                  }             });         });     }); 

i got output

location1  ---sublocation1 location2  ---sublocation1 location1  ---sublocation2 location1  ---sublocation3 location2  ---sublocation2 

but need this

location1  --sublocation1  --sublocation2  --sublocation2 location2   --sublocation1   --sublocation2 

into collapsible set in jquery mobile how can done this

you need first loop through json create array of locations removing duplicates. , loop again locations create collapsibles. while looping through locations, go through json extract sub locations , append them there parents.

i've added class of location's name each collapsible facilitate appending sub locations.

/* add locations json */ var collapsible = []; /* remove duplicate locations */ var locations = [];  $.each(data, function (i, v) {     collapsible.push(v.webform_views_add_sublocation_form_location);     $.each(collapsible, function (i, v) {         if ($.inarray(v, locations) === -1) {             locations.push(v); /* ["location1", "locations"] */         }     }); });  /* loop through locations */ $.each(locations, function (i, loc) {     var parent = loc;     var elements = '';      /* loop through json */      $.each(data, function (x, sub) {         var subloc = sub.webform_views_add_sublocation_form_sub_location;         if (sub.webform_views_add_sublocation_form_location == parent) {             /* sub locations */             elements += '<li><a href="#">' + subloc + '</a></li>';         }     });      /* create collapsibles based on number of locations        add listview, append sub locations , refresh        collapsible-set @ once */      $("#location-list").append($("<div/>", {         "data-role": "collapsible",             "class": parent     }).append($("<h3/>").text(parent)).append($("<ul/>", {         "data-role": "listview",             "data-theme": "b"     }).append(elements).listview())).collapsibleset('refresh'); }); 

demo