车把 node.js 渲染 table 数据问题

Question

我的车把模板有以下数据（object 的数组）。请查找以下数据：

{
    "students": {
        "fees": {
            "others": [
                {
                    "Student Name": "Ashy",
                    "Term1": ",000.00",
                    "Term2": ",000.00",
                    "Total": ",000.00",
                },
                {
                    "Student Name": "Test",
                    "Term1": ",000.00",
                    "Total": ",000.00",
                }
            ],
        }
    }
}

请注意上面数组中的第二个 object 没有键 Term2。请在下面找到车把模板：

{{#students}}
{{#fees}}
<table>
<thead>
   <tr>
     <td rowspan="1">Student Fees</td>
   </tr>
  <tr>
    {{#each others.[0]}}
      <th>{{@key}}</th>
    {{/each}}
  </tr>
</thead>
<tbody>
   {{#each others}}
    <tr>
        {{#each this}}
        <td>{{this}}</td>
      {{/each}}
    </tr>
  {{/each}}
</tbody>
</table>

{{/fees}}
{{/students}}

输出如下所示：

由于名为 Test 的学生的第 2 学期的值不存在，因此 Total 列的数据已移至 Term2 的列。我希望如果学生没有任何第 2 学期的数据，它应该显示为空白，并且正确的值应该与 Total 列相关联。基本上数据应该坚持上面 header 中的键。谁能告诉我，我该如何实现。

谢谢

Answer 1

为了实现获得一致输出的目标，我认为最好的方法是确保一致的 input.

您能否在键“Term2”处向第二个学生添加一个空字符串值并确保每个学生对象包含相同的一组键（“学生姓名”、“Term1”、“Term2” , "总计")?

这将是最合乎逻辑的方法。

如果由于某种原因您无法修改学生对象，那么我认为下一个更好的解决方案是将 columnsKeys 数组传递给您的模板。该数组将定义每个列键以显示在您的输出中，并且在呈现学生时，我们将为每个学生循环遍历每个列键并执行 lookup 以获得所需的值。

添加到模板数据的对象如下所示：

"columnKeys": [
  "Student Name",
  "Term1",
  "Term2",
  "Total"
]

您的模板将变为：

<table>
  <thead>
    <tr>
      <td rowspan="1">Student Fees</td>
    </tr>
    <tr>
      {{#each columnKeys as |columnKey|}}
        <th>{{columnKey}}</th>
      {{/each}}
    </tr>
  </thead>
  <tbody>
    {{#each students.fees.others as |student|}}
      <tr>
        {{#each ../columnKeys as |key|}}
          <td>{{lookup student key}}</td>
        {{/each}}
      </tr>
    {{/each}}
  </tbody>
</table>

我创建了一个fiddle供您参考。

车把 node.js 渲染 table 数据问题

handlebars node.js issue with rendering table data

javascript

node.js

handlebars.js

express-handlebars