Как создать шаблон Mustache для данных JSON с вложенными объектами?

Question

У меня есть этот JSON данные

[ 
     { 
     "item":{ 

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

     ] 
     }, 
     { 
     "item":{ 

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

     ] 
     } 
] 

и мой код

<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> 

Я использую JavaScript и усы шаблоны, чтобы отобразить все элементы с его названием, описанием и изображением. Но у меня возникают проблемы с доступом через вложенные массивы. Как получить эти вложенные значения?

Answer 1

Если вы хотите перебирать массив верхнего уровня, вы должны называть его {{#.}} .. {{./}} Также у вас есть опечатки, посмотрите, вот как будет работать ваш шаблон:

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