Mustache.Jsテンプレートを使用してネストされた配列をHTMLページにバインドする

Question

Mustache.jsを使用して、以下のJSONデータをHTMLページにバインドするにはどうすればよいですか？

データ -

[ 
    { 
     "procedureList": [ 
      { 
       "procedureName": "Root Canal", 
       "cost": 10200 
      } 
     ], 
     "department": "Dental" 
    }, 
    { 
     "procedureList": [ 
      { 
       "procedureName": "Vasactomy", 
       "cost": 10000 
      }, 
      { 
       "procedureName": "IVF", 
       "cost": 10000 
      } 
     ], 
     "department": "Gynic" 
    }, 
] 

私は以下のソリューションを試してみましたが、それだけで全体のJSON配列をループではないですDental'.It部門」のためのデータを作成しています。

以下のテンプレートを修正するのに任意のヘルプは本当に

  <div class="panel-group" id="accordion">    
       {{#department}} <!--array of department names--> 
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
         <h4 class="panel-title"> 
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;{{{department}}}</a> 
         </h4> 
        </div> 
        <div id="collapseOne" class="panel-collapse collapse"> 
         <div class="panel-body">       
          {{#procedureList}} <!--array of procedure names--> 
          <div class="row"> 
          <div class="col-md-6"> 
           <p><a href="" target="_blank">{{procedureName}}</a></p> 
          </div> 
          <div class="col-md-6"> 
           <button type = "button" class = "btn btn-primary">Starts from {{cost}}</button>         
          </div> 
          </div> 
          <p></p> 
          {{/procedureList}} <!--array of procedure names-->               
         </div> 
        </div> 
       </div> 
       {{/department}} <!--Array of department names-->     
       </div> 

Answer 1

を理解されるであろう問題は、あなたのJSONは、部門の配列である下departmentsという名前のキーを保持していないということです。それは直接配列です。

あなたは

{ "departments" : [<your existing json>]} 

または元の要素が配列の場合ループに#.、/.を使用するあなたのJSONを変更することができます。

<div class="panel-group" id="accordion"> 
    {{#.}}<!--array of department names--> 
    <...snip...> 
    {{/.}}<!--Array of department names--> 
</div>