How to render data in 2d tables via mustache.js?

Question

My data is consisting of 100 or rows like this.

{"data":[
{"country":["AD"], "number":["41","2","33","56","45","50","57","68"]},
{"country":["AE"], number":["5","9","2","19","7","11","6","1"]}
]}

I want to render it in 2d array form

<tr>
<td>Country</td>
<td>Value  of number on date1</td>
<td>Value of number on date2</td>
<td>Value  of number on date3</td>
<td>Value of number on date4</td>
<td>Value  of number on date5</td>
<td>Value of number on date6</td>
<td>Value  of number on date7</td>
</tr>

The scripting template i used -

<tbody>
    {{#data}}
    <tr> 
    <td>{{country}}</td>
    {{#number}}
    <td>{{number}}</td>
    {{/number}}
    </tr>
    {{/data}}
    </tbody>

Only country is being rendered not numbers. Can someone explain me what I'm doing wrong ?

Answer 1

You need to use the implicit iterator tag while inside your {{# number }} section: {{ . }}

{{# number }}
  <td>{{ . }}</td>
{{/ number }}