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

Question

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(data.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.

ShaneBlake · Accepted Answer · 2011-08-02 14:20:33Z

1

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>

edited Aug 2, 2011 at 14:20

answered Jul 28, 2011 at 18:38

ShaneBlake

11.1k2 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ffmariners Over a year ago

So, I actually have tried using the {{each}} syntax. Do you have any examples of how to incorporate that into a nested listview using hierarchical data? Or looking at the example above, where should I be putting these template tags?

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related