Create table using Mushtache.js

Question

I am facing a problem while creating a table using Mushtache.js

View file:

<table class="table table-bordered table-hover table-striped tablesorter">
    <thead>
        <tr>
            <th class="header">Name</th>
            <th class="header">Email ID</th>
            <th class="header">Contact Number</th>
            <th class="header">Edit</th>
        </tr>
    </thead>
    <tbody>
    <div id="eTableList"></div>    
    <script id="eList" type="text/template">     
            <tr>
                <td>{{name}}</td>
                <td>{{email}}</td>
                <td>{{contact_number}}</td>
                <td><a href="{{id}}">View/Edit</a></td>
            </tr>
     </script>    
    </tbody>
</table>

JS code:

  function createTable(jsonEData){    
      var template = $("#eList").html();
      expList = Mustache.render(template, jsonEData); 
      $("#expertTableList").html(expList);
  }

I am calling this method as

   <script language="javascript">
        $(document).ready(function(){
            createTable(<?php echo $this->eList;?>);
        })
    </script>

and the value of $this->eList = jsonEData is

  [
    {
        "id": "52d3d523bdde226f17a581ba",
        "name": "shgajsah",
        "email": "0",
        "contact_number": 2147483647
    },
    {
        "id": "52d3d5c8bdde22c817a581ba",
        "name": "fffsdf",
        "email": "[email protected]",
        "contact_number": 323323232
    }
]

I am not getting any error but table is not getting populated using above code. So please tell me where I am doing wrong?

Answer 1

You're not iterating over your items, give this a shot:

{{#.}}
   <tr>
      <td>{{name}}</td>
      <td>{{email}}</td>
      <td>{{contact_number}}</td>
      <td><a href="{{id}}">View/Edit</a></td>
   </tr>
{{/.}}

or perhaps:

{{#each .}}
   <tr> ... </tr>
{{/each .}}