Question

我一直在尝试并且没有使用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. -->

非常感谢任何帮助

Answer 1

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

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);
});

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

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

这个模板相当丑陋和含糊不清，如果有更好的方法可以实现这一点，请随时告诉我。

使用Mustache JS迭代JSON数据

1 个答案: