Load data into a nested collapsible set

Question

Currently loading JSON data from the server and end up displaying them in a collapsible set as follow:

I am trying to display it as follows - A nested collapsible set. Is there any way I can achieve this.

My code for 1st image:

//JS CODE
$(document).on("pageinit", "#view", function () {
    $.getJSON("http://www.examplesite.com/view.php", function (data) {
        $.each(data, function (elem) {
            var wrap = $("<div/>").attr('data-role', 'collapsible');
            $("<h1/>", {
                text: data[elem].type
            }).appendTo(wrap);

            $("<p/>", {
                text: "Name: " + data[elem].name
            }).appendTo(wrap);

            $("<p/>", {
                text: "Quantity: " + data[elem].quantity
            }).appendTo(wrap);

            $("<p/>", {
                text: "Barcode: " + data[elem].barcode
            }).appendTo(wrap);

            $("<p/>", {
                text: "Detail: " + data[elem].detail
            }).appendTo(wrap);

            wrap.appendTo('#view-list');
        });
        $("#view-list").collapsibleset();
    });
});

<!--HTML CODE-->
<article data-role="content">
    <div data-role="collapsible" data-collapsed="false" id="view-list">
        <!--load data here-->
    </div>
 </article>

I attempted the following to achieve the results but end up getting 2 separate collapsible sets.

//JS CODE
$(document).on("pageinit", "#view", function () {
    $.getJSON("http://www.examplesite.com/view.php", function (data) {
        $.each(data, function (elem) {
            var wrap = $("<div/>").attr('data-role', 'collapsible');
            var subWrap = $("<div/>").attr('data-role', 'collapsible');
            $("<h1/>", {
                text: data[elem].type
            }).appendTo(wrap);

            $("<h2/>", {
                text: data[elem].name
            }).appendTo(subWrap);

            $("<p/>", {
                text: "Quantity: " + data[elem].quantity
            }).appendTo(subWrap);

            $("<p/>", {
                text: "Barcode: " + data[elem].barcode
            }).appendTo(subWrap);

            $("<p/>", {
                text: "Detail: " + data[elem].detail
            }).appendTo(subWrap);

            wrap.appendTo('#view-list');
            subWrap.appendTo('#sub-view-list');
        });
        $("#view-list").collapsibleset();
        $("#sub-view-list").collapsibleset();
    });
});

<!--HTML Code-->
<article data-role="content">
    <div data-role="collapsible" data-collapsed="false" id="view-list">
        <!--first collapsible data load here-->
        <div data-role="collapsible" id="sub-view-list">
            <!--Sub data wil load here-->
        </div>
    </div>
</article>

The JSON String I am accessing:

[
  {
    "id": "1",
    "type": "Beverage",
    "name": "Orange Juice",
    "quantity": "10",
    "barcode": null,
    "detail": "1 Ltr Bottle"
  },
  {
    "id": "3",
    "type": "Beverage",
    "name": "Apple Juice",
    "quantity": "10",
    "barcode": null,
    "detail": "1 Ltr Bottle"
  },
  {
    "id": "4",
    "type": "Beverage",
    "name": "Mango Juice",
    "quantity": "10",
    "barcode": null,
    "detail": "1 Ltr Bottle"
  },
  {
    "id": "5",
    "type": "Beverage",
    "name": "Cranberry Juice",
    "quantity": "20",
    "barcode": null,
    "detail": "2 Ltr Bottle"
  },
  {
    "id": "6",
    "type": "Beverage",
    "name": "Strawberry Juice",
    "quantity": "20",
    "barcode": null,
    "detail": "2 Ltr Bottle"
  },
  {
    "id": "7",
    "type": "Beverage",
    "name": "Pear Juice",
    "quantity": "15",
    "barcode": null,
    "detail": "1.5 Ltr Bottle"
  },
  {
    "id": "8",
    "type": "Canned Food",
    "name": "Baked Beans",
    "quantity": "10",
    "barcode": null,
    "detail": "300g"
  },
  {
    "id": "9",
    "type": "Canned Food",
    "name": "Sardines",
    "quantity": "10",
    "barcode": null,
    "detail": "300g"
  },
  {
    "id": "10",
    "type": "Canned Food",
    "name": "Hot Dog",
    "quantity": "20",
    "barcode": null,
    "detail": ""
  },
  {
    "id": "11",
    "type": "Canned Food",
    "name": "Sweet Corn",
    "quantity": "20",
    "barcode": null,
    "detail": "500g"
  },
  {
    "id": "12",
    "type": "Canned Food",
    "name": "Sweet Potato",
    "quantity": "15",
    "barcode": null,
    "detail": null
  },
  {
    "id": "13",
    "type": "Chocolate",
    "name": "Carbury",
    "quantity": "10",
    "barcode": null,
    "detail": "50g"
  },
  {
    "id": "14",
    "type": "Chocolate",
    "name": "Lindt",
    "quantity": "10",
    "barcode": null,
    "detail": "50g"
  },
  {
    "id": "15",
    "type": "Chocolate",
    "name": "Kit Kat",
    "quantity": "20",
    "barcode": null,
    "detail": "70g"
  },
  {
    "id": "16",
    "type": "Chocolate",
    "name": "Mars",
    "quantity": "20",
    "barcode": null,
    "detail": null
  },
  {
    "id": "17",
    "type": "Chocolate",
    "name": "Toblerone",
    "quantity": "15",
    "barcode": null,
    "detail": "500g"
  }
]

Answer 1

I'm not going to get into the jQuery mobile part of this because I don't have a phone to test it on, but the problem that you're facing can be solved by mapping the array to a new object based on the types.

for(var i in data) (result[data[i].type]||(result[data[i].type]=[])).push(data[i]);

What that does is iterate through the JSON array and for each item it will create a new array for that type in a result object if it doesn't already exist, then append the current item to that type array.

I've built an example below to demonstrate this using the JSON string you've supplied, but I'll leave the styling to you.

var data = [{"id":"1","type":"Beverage","name":"Orange Juice","quantity":"10","barcode":null,"detail":"1 Ltr Bottle"},{"id":"3","type":"Beverage","name":"Apple Juice","quantity":"10","barcode":null,"detail":"1 Ltr Bottle"},{"id":"4","type":"Beverage","name":"Mango Juice","quantity":"10","barcode":null,"detail":"1 Ltr Bottle"},{"id":"5","type":"Beverage","name":"Cranberry Juice","quantity":"20","barcode":null,"detail":"2 Ltr Bottle"},{"id":"6","type":"Beverage","name":"Strawberry Juice","quantity":"20","barcode":null,"detail":"2 Ltr Bottle"},{"id":"7","type":"Beverage","name":"Pear Juice","quantity":"15","barcode":null,"detail":"1.5 Ltr Bottle"},{"id":"8","type":"Canned Food","name":"Baked Beans","quantity":"10","barcode":null,"detail":"300g"},{"id":"9","type":"Canned Food","name":"Sardines","quantity":"10","barcode":null,"detail":"300g"},{"id":"10","type":"Canned Food","name":"Hot Dog","quantity":"20","barcode":null,"detail":""},{"id":"11","type":"Canned Food","name":"Sweet Corn","quantity":"20","barcode":null,"detail":"500g"},{"id":"12","type":"Canned Food","name":"Sweet Potato","quantity":"15","barcode":null,"detail":null},{"id":"13","type":"Chocolate","name":"Carbury","quantity":"10","barcode":null,"detail":"50g"},{"id":"14","type":"Chocolate","name":"Lindt","quantity":"10","barcode":null,"detail":"50g"},{"id":"15","type":"Chocolate","name":"Kit Kat","quantity":"20","barcode":null,"detail":"70g"},{"id":"16","type":"Chocolate","name":"Mars","quantity":"20","barcode":null,"detail":null},{"id":"17","type":"Chocolate","name":"Toblerone","quantity":"15","barcode":null,"detail":"500g"}]
var result = {};
var list = $('#view-list');

// create the result object
for(var i in data) (result[data[i].type]||(result[data[i].type]=[])).push(data[i]);

// iterate the result object
for(var i in result) {
    // make the outer collapsible
    var outer = $("<div data-role='collapsible'/>");

    // append the title for this type
    outer.append("<h1>" + i + "</h1>");

    // iterate the items for this type
    for(var j in result[i]) (function(item){
        // make the inner collapsible
        var inner = $("<div data-role='collapsible'/>");
        inner.append("<h2>" + item.name + "</h2>");
        inner.append("<p>Quantity: " + item.quantity);
        inner.append("<p>Barcode: " + item.barcode);
        inner.append("<p>Detail: " + item.detail);
        outer.append(inner);
    })(result[i][j]);
    list.append(outer);
}

/* For demo purposes only */
* { margin: 0 } [data-role="collapsible"] {  border: 1px solid #666; margin: 5px; }

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<article data-role="content">
    <div data-role="collapsible" data-collapsed="false" id="view-list">
    </div>
</article>