Binding nested array to HTML page using Mustache.Js template

Question

How do I bind the JSON data below, to an Html page using Mustache.js?

Data -

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

I tried the below solution,but it's creating data only for department 'Dental'.It's not looping through the entire Json array.

Any help in correcting the below template will be really appreciated

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

Gabriele Petrioli · Accepted Answer · 2017-12-03 16:12:36Z

1

The problem is that your json does not hold a key named departments under which is the array of departments. It is directly an array.

You can either change your json to be

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

or use #., /. to loop if the original element is an array.

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

answered Dec 3, 2017 at 16:12

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

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

Collectives™ on Stack Overflow

Binding nested array to HTML page using Mustache.Js template

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related