How to use jQuery & jQuery templates to create nested list views based on nested JSON data.

I have an AJAX call returning the following JSON:

{
"categories": [
    {
        "active": true,
        "name": Cat1,
        "items": [
            {
                "active": true,
                "id": 1,
    },
            {
        "active": true,
                "id": 2,
    }
  ]
},
{
    "active": true,
        "name": Cat2,
        "items": [
            {
                "active": true,
                "id": 3,
    },
            {
        "active": true,
                "id": 4,
    }
  ]
}
]}

and what I want to happen is have the top level category names go to one list view and the bottom level item id's go into another list level once the parent category item is clicked.

Currently, I have the code working to create the top level category listview, as follows (this is JQM):

<div data-role="content">
  <script id="Template-categories" type="text/x-jquery-tmpl">
    <li data-theme="a" class="ui-btn ui-btn-icon-right ui-li ui-li-has-alt ui-btn-up-a">
      <div class="ui-btn-inner ui-li ui-li-has-alt">
        <div class="ui-btn-text">
          <a href="#${name}" class="ui-link-inherit">
              <h3 class="ui-li-heading">${name}</h3>
          </a>
        </div>
      </div>        
    </li>
  </script>
  <ul data-role="listview" id="listview-categories" data-theme="a">

  </ul>

And this is the AJAX request:

<script> // JSONP for ALL
  $(document).ready(function() {
      $.ajax({
                url: "http://####.heroku.com/api/all_categories.json",
                data: "format=json",
                cache: false,
                dataType: "jsonp",
                type: 'GET',
                timeout: 5000,
                success: function(data) {
                  $.each(data, function() {
                    $("#Template-categories").tmpl(data.categories).appendTo("#listview-categories");
                  });
                  $.each(data, function() {
                    // THIS IS WHERE I GET LOST! How to then break down the category 1 items and category 2 items into their own listview dynamically!
                  });
                },
                error: function()
                  { alert('BOOOO Error');}
    });
});

So: I have the top level working, I just need to get the second level (.items) in to list views that are subordinate to their parent item (categories). IF that is a complex problem, even telling me how I could manually do the each loop with an if statement for Category 1 (e.g. if name=Category 1 then loop through the items array) that would be helpful as I could just hard code it into the html for now.

Thanks!

EDIT: Tried this code...

I guess one thing I don't get is why this doesn't work...

success: function(data) {
                  $.each(data, function() {
                    $("#Template-categories").tmpl(data.categories).appendTo("#listview-categories");
                  });
                  $.each(data, function() {
                    if(da开发者_StackOverflow社区ta.categories.name == "Cat1"){
                      $("#Template-cat1").tmpl(data.categories.items).appendTo("#listview-cat1");
                    }
                  });

And then in my template just using the ${id} attribute and whatnot to display the values from the items array.

---

It's actually rather simple, really. Inside your current template use the {{each}} syntax to create the sub list. There's pretty good examples in the documentation : http://api.jquery.com/template-tag-each/

UPDATE w/ example :

• note that there were errors in the json object that I havve corrected in the example...

var myData = {
   categories: [
      { active: true, name: "Cat1", items: [ 
      { active: true, id: 1 },
      { active: true, id: 2 } ]
  },
  { active: true, name: "Cat2", items: [
      { active: true, id: 3 },
      { active: true, id: 4 } ]
  } ]
};

$(function () {

$("#Template-categories").tmpl(myData).appendTo("#listview-categories"); });

<script id="Template-categories" type="text/x-jquery-tmpl">
<ul>
{{each categories}}
<li data-theme="a" class="ui-btn ui-btn-icon-right ui-li ui-li-has-alt ui-btn-up-a">
    <div class="ui-btn-inner ui-li ui-li-has-alt">
        <div class="ui-btn-text">
            <a href="#${name}" class="ui-link-inherit">
                <h3 class="ui-li-heading">${name}</h3>
            </a>
        </div>
        <div> <ul>
        {{each items}}
            <li> item : ${name}</li>
        {{/each}}
        </ul> </div>
    </div>
</li>
{{/each}}
</ul>      
</script>

<div id="listview-categories"> </div>