Node.js环境下Handlebars渲染表格缺失字段引发列错位问题求助

问题根因 #

你当前的实现逻辑是表头取others数组第一个元素的键作为列标准，但是遍历行数据时是遍历当前学生对象自身的所有键，缺少Term2字段的对象只会遍历出3个键，渲染的<td>数量比表头的<th>少1个，就会出现列错位。

解决方案 #

方案1：预处理数据（无需改模板，更简单） #

在把数据传给Handlebars渲染前，先给所有学生对象补全缺失的字段，缺失字段值设为空字符串即可，原模板不需要任何修改。
预处理代码示例：

const rawData = {
  "students": {
    "fees": {
      "others": [
        // 你的原始数据
      ]
    }
  }
};
const othersList = rawData.students.fees.others;
if (othersList.length > 0) {
  // 取第一个元素的键作为标准列
  const standardColumns = Object.keys(othersList[0]);
  // 遍历补全所有对象的字段
  othersList.forEach(item => {
    standardColumns.forEach(col => {
      if (!item.hasOwnProperty(col)) {
        item[col] = '';
      }
    })
  })
}
// 再将处理后的rawData传入模板渲染即可

方案2：修改模板+注册辅助函数 #

如果不想改动源数据，可以通过注册Handlebars辅助函数，强制每行按表头的固定键顺序取值渲染。

第一步：注册辅助函数

在Node.js中初始化Handlebars时添加以下代码：

const Handlebars = require('handlebars');
// 根据键名取对象值，不存在则返回空
Handlebars.registerHelper('getColValue', function(obj, key) {
  return obj[key] ?? '';
});
// 注册获取对象键列表助手
Handlebars.registerHelper('getKeys', function(obj) {
  return Object.keys(obj || {})
})

第二步：修改模板代码

{{#students}}
{{#fees}}
<!-- 先取出表头固定列的键列表 -->
{{assign "colList" (getKeys others.[0])}}
<table>
<thead>
   <tr>
     <td rowspan="1">Student Fees</td>
   </tr>
  <tr>
    {{#each colList}}
      <th>{{this}}</th>
    {{/each}}
  </tr>
</thead>
<tbody>
   {{#each others}}
    <tr>
        {{#each ../colList}}
        <!-- 按固定列顺序取值，保证单元格数量和表头一致 -->
        <td>{{getColValue ../this this}}</td>
      {{/each}}
    </tr>
  {{/each}}
</tbody>
</table>
{{/fees}}
{{/students}}

注：如果你的Handlebars版本没有内置assign助手，可以直接把标准列列表作为渲染上下文的参数传给模板，使用起来更方便。

内容的提问来源于stack exchange，提问作者Ashy Ashcsi