jQM 1.4 Dynamic Collapsible from JSON

by Erik Zanker

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<div data-role="page" id="page1">
    <div data-role="header">
         <h1>My page</h1> 
    </div>
    <div role="main" class="ui-content">
        <div id="menu-content"></div>
    </div>
    
</div>

JavaScript

var data= [
   {
      "productId":1,
      "name":"Coffee",
      "baseprice":2.00,
      "productoption":[
         {
            "productOptionId":1,
            "topping":"honeymustard",
            "baseprice":0.30
         },
         {
            "productOptionId":2,
            "topping":"barbeque",
            "baseprice":0.50
         },
         {
            "productOptionId":3,
            "topping":"whipcream",
            "baseprice":0.50
         }
      ],
      "productSubOption":[
         {
            "productSubOptionId":1,
            "size":"Small",
            "baseprice":0.50
         },
         {
            "productSubOptionId":2,
            "size":"Medium",
            "baseprice":0.50
         },
         {
            "productSubOptionId":3,
            "size":"Large",
            "baseprice":0.50
         }
      ]
   },
   {
      "productId":2,
      "name":"Burger",
      "baseprice":2.00,
      "productoption":[
         {
            "productOptionId":4,
            "topping":"mayo",
            "baseprice":0.50
         },
         {
            "productOptionId":5,
            "topping":"onion",
            "baseprice":0.50
         }
      ],
      "productSubOption":[
         {
            "productSubOptionId":4,
            "size":"Small",
            "baseprice":0.50
         },
         {
            "productSubOptionId":5,
            "size":"Medium",
            "baseprice":0.50
         }
      ]
   }
];

function createList(menudata){
    var html = '';
    $.each(menudata,function(i,val){
        html += '<div data-role="collapsible" data-inset="true" data-id='+val.productId+'><h3>'+val.name+'</h3><ul data-role="listview" data-inset="true">';
        $.each(val.productoption,function(i,val){
            html += '<li class="row">'+val.topping+'</li>';
        });
        html += '</ul></div>';
    });
    return html;
}

$(document).on("pagecreate", "#page1", function () {
    var menulistitem =...