How to loop through an Json array in mustache template

Question

I have an array with JSON object:

{result" : "OK","data":[
                    {"name" : "henrytest",
                     "id" : "9a3d1faaaac742889a940a6d9df49d16"},
                    {"name" : "henrytest",
                     "id" : "9a3d1faaaac742889a940a6d9df49d16"}, 
                    {"name" : "henrytest",
                     "id" : "9a3d1faaaac742889a940a6d9df49d16"}
                   ]
 }

I'm trying to loop through the array to get the 3 fields displayed in my table. However nothing is getting diplayed. Here is my mustache template:

<table style="width:100%;">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>User ID</th>

                            </tr>
                        </thead>
                        <tbody>
                            {{#data}}
                                <tr>

                                    <td>{{name}}</td>
                                    <td>{{id}}</td>

                                </tr>
                              {{/data}}

                        </tbody>
</table>

I'm not able to display any fields in the table.Stuck badly with this..:( :(Any ideas how i can achieve this??

don't know anything about mustache, but i know JSO, the data property in JSO is an array. Are you sure that {{#data}} is accessing array elements one by one ? Most probably You'll need some sort of looping directive to loop through each element in the JSO. To test what I said, try replacing {{#data}} with {{#data[0]}} and see if you get the first element in the data array displayed correctly. — anu
– anu, Commented Mar 1, 2015 at 8:05
I don't know mustache, but you have to loop over the JSON. The first name is like: data[0].name — Joerg
– Joerg, Commented Mar 1, 2015 at 8:05

roshan · Accepted Answer · 2015-03-01 08:57:20Z

5

Just went through mustache.I hope this is what you expected.

  $(document).ready(function() {
    var jsonData = {
      "result": "OK",
      "data": [{
        "name": "henrytest",
        "id": "9a3d1faaaac742889a940a6d9df49d16"
      }, {
        "name": "henrytest",
        "id": "9a3d1faaaac742889a940a6d9df49d16"
      }, {
        "name": "henrytest",
        "id": "9a3d1faaaac742889a940a6d9df49d16"
      }]
    }

    var Usertemplate = $("#user-template").html();
    $("#userinfo").html(Mustache.to_html(Usertemplate, jsonData));
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.8.1/mustache.js"></script>
<table style="width:100%;">
  <thead>
    <tr>
      <th>Name</th>
      <th>User ID</th>
    </tr>
  </thead>
  <tbody id="userinfo">
    <script id="user-template" type="text-template">
      {{#data}}
      <tr>
        <td>{{name}}</td>
        <td>{{id}}</td>

      </tr>
      {{/data}}
    </script>
  </tbody>
</table>

edited Mar 1, 2015 at 8:57

answered Mar 1, 2015 at 8:19

roshan

2,5502 gold badges28 silver badges37 bronze badges

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

1 Comment

user1234 Over a year ago

Thanks roshan! I'll try now!!

Collectives™ on Stack Overflow

How to loop through an Json array in mustache template

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related