html - Iterating through JSON data with Mustache JS -

html - Iterating through JSON data with Mustache JS -

i have been trying , failing iterate through json info mustache js in order populate table looks like:

{ "pay":[ [ "regular hours", "$75.00", "$75.00" ] ], "earnings":[ [ "regular earnings", "$2,277.00", "$1,200.00" ], [ "non taxation holiday pay", "$0.00", "$50.80" ] ], "deductions":[ [ "other deduction 5", "$0.00", "$50.00" ] ] }

how iterate using mustache js in order have every inner array rows , outer array headers this:

<tr> <th colspan="4">pay</th> </tr> <tr> <td>regular hours</td> <td>75</td> <td>75</td> </tr> <!-- etc. -->

any help appreciated

this issue has made me consider switching on handlebars avoid need hacky code. info beingness passed in json input original question. function format info key value pairs, after info rendered mustache template.

function (data) { var paysliplist = json.parse(data.d); formatteddata = { 'entries': [] }; (var property in paysliplist) { if (paysliplist.hasownproperty(property)) { formatteddata['entries'].push({ 'key': property, 'value': paysliplist[property] }); } } var tablepayslip = $("#tblpaydetails tbody"); $.each(formatteddata, function (id, payslip) { var template = $('#renderpaystub').html(); var html = mustache.render(template, payslip); tablepayslip.append(html); });

the template access key value pairs this:

<script type="text/template" id="renderpaystub"> {{#.}} {{#.}} <tr> <th colspan="3">{{key}}</th> </tr> {{/.}} {{#value}} <tr> {{#.}}<td>{{.}}</td>{{/.}} </tr> {{/value}} {{/.}} </script>

this template ugly , ambiguous, if there improve method accomplish this, sense free allow me know.

html ajax json vb.net mustache