Dynamic collapsible set content based on dynamic section in jQuery mobile

Question

I have a json it look 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 to load this json as colapsible set location into section part and sublocation is 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 the output like

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

but I need like this

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

into collapsible set in jQuery mobile how can I done this

Answer 1

You need first to loop through JSON to create an Array of the locations by removing duplicates. And then loop again locations to create collapsibles. While looping through locations, go through JSON to extract Sub locations and append them to there parents.

I've added class of location's name for each collapsible to facilitate appending Sub locations.

/* add all locations from 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 and refresh
       collapsible-set at 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