How to create a Mustache template for JSON data with nested objects?

Question

I have this JSON data

    [
      {
         "item":{

            "name":"some name",
            "description":" someDescription ",
            "price":"6",         
            "image_url":"url"
         },
         "options":[

         ]
      },
       {
         "item":{

            "name":"some name",
            "description":" someDescription ",
            "price":"6",         
            "image_url":"url"
         },
         "options":[

         ]
      }
]

and my code is

<script id="itemtpl" type="text/template">
{{#items}}
        {{#item}}
        <div class ="item"> 
            <img src = "{{image_url}} alt="Photo of {{menu_item_name}}"/>
            <h3>{{menu_item_name}}</h3>
            <h4>{{menu_item_price}}</h4>
            <p>{{menu_item_description}}</p>
        </div>
        {{/#item}}
{{/items}}
</script>


<script type ="text/javascript">
$(function(){

    $.getJSON('fullmenu.json', function(data) {
            var template = $('#itemtpl').html();
            var html = Mustache.to_html(template, data);
            $('#menu').html(html);
    });//getJSON

});//function

</script>

I am using JavaScript and Mustache Templates to display all the items with its name, description and picture. But I am having trouble accessing through nested arrays. How do I retrieve these nested values?

Andrei Hrabouski · Accepted Answer · 2015-01-19 18:43:09Z

1

If you want to iterate over a top-level array you should refer it as {{#.}} .. {{./}} Also you have some typos, look, that's how your template will work:

{{#.}}
        {{#item}}
        <div class ="item"> 
            <img src = "{{image_url}} alt="Photo of {{name}}"/>
            <h3>{{name}}</h3>
            <h4>{{price}}</h4>
            <p>{{description}}</p>
        </div>
        {{/item}}
{{/.}}

answered Jan 19, 2015 at 18:43

Andrei Hrabouski

1252 silver badges9 bronze badges

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

2 Comments

bpn40441 Over a year ago

Thanks. And I just got it to work using dot notation. Thanks Anyways

bpn40441 Over a year ago

And those typos were just dummy variables of how actually my JSON data looks.

Collectives™ on Stack Overflow

How to create a Mustache template for JSON data with nested objects?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related