Mustache.Js 템플릿을 사용하여 HTML 페이지에 중첩 배열 바인딩

Question

아래의 JSON 데이터를 Mustache.js를 사용하여 Html 페이지에 바인딩하려면 어떻게해야합니까?

데이터 -

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

나는 아래의 솔루션을 시도하지만 Dental'.It 전체 JSON 배열을 통해 반복하지의 '유일한 부서에 대한 데이터를 생성합니다.

아래의 템플릿을 수정에 어떤 도움이 정말

  <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라는 이름의 키를 보유하지 않는다는 것입니다. 그것은 직접 배열입니다.

당신은 당신의 JSON이

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

일 또는 원래의 요소가 배열 인 경우 루프 #., /.을 사용하여 변경할 수 있습니다.

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