Html 使用Mustache JS迭代JSON数据

我一直在尝试使用Mustache JS遍历一些JSON数据，以填充如下表：

{
   "Pay":[
      [
         "Regular Hours",
         "$75.00",
         "$75.00"
      ]
   ],
   "Earnings":[
      [
         "Regular Earnings",
         "$2,277.00",
         "$1,200.00"
      ],
      [
         "Non Tax Vacation Pay",
         "$0.00",
         "$50.80"
      ]
   ],
   "Deductions":[
      [
         "Other Deduction 5",
         "$0.00",
         "$50.00"
      ]
   ]
}

我如何使用Mustache JS进行迭代，以便将每个内部数组作为行，将外部数组作为头，如下所示：

<tr>
   <th colspan="4">Pay</th>
</tr>
<tr>
   <td>Regular Hours</td>
   <td>75</td>
   <td>75</td>
</tr>

<!-- Etc. -->

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

支付
正常工作时间
75
75

---

<> >任何帮助都将非常感谢

< P>这个问题使我考虑切换到把手，以避免需要HACKY代码。传入的数据是来自原始问题的JSON输入。此函数将数据格式化为键值对，然后由Mustach模板呈现数据

function (data) {
    var payslipList = JSON.parse(data.d);
    formattedData = { 'entries': [] };
    for (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);
});

访问键值对的模板如下所示：

<tr>
   <th colspan="4">Pay</th>
</tr>
<tr>
   <td>Regular Hours</td>
   <td>75</td>
   <td>75</td>
</tr>

<!-- Etc. -->

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

{{#.}}
{{#.}}
{{key}}
{{/.}}
{{{#值}}
{{#.}}{{.}}{{/.}}
{{/value}}
{{/.}}

---

这个模板非常难看而且模棱两可，如果有更好的方法来实现这一点，请随时告诉我。

JSON是如何生成的？你能控制它吗？检查：谢谢，我创建了自己的处理程序来解决这个问题。不确定为什么这么简单的问题几乎没有回应。哦，你能发布代码吗？我想看看你是怎么解决的。