Postman可视化下如何通过Handlebars遍历content数组多元素生成属性值表格

根因定位 #

原有代码仅提取了content数组第一个元素的键值对传入模板，数据结构层面未将其余数组元素上传到渲染上下文，即便调整Handlebars的#this语法，也因为缺乏对应数据无法完成渲染。

最小改动实现（零额外依赖，无缝适配原有代码逻辑） #

直接修改原有数据处理与模板结构，不引入新的逻辑依赖，完全匹配现有编码习惯：

// 调整后的模板：外层遍历每个独立表格，内层渲染当前表格的所有键值对行
var template = `
{{#each response}}
    <table bgcolor="#FFFFFF" style="margin: 0 0 20px 0; border-collapse: collapse; width: 100%;">
        <tr>
            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">Prop</th>
            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">Val</th>
        </tr>
        {{#each this}}
            <tr>
                <td style="padding: 8px; border: 1px solid #ddd;">{{key}}</td>
                <td style="padding: 8px; border: 1px solid #ddd;">{{val}}</td>
            </tr>
        {{/each}}
    </table>
{{/each}}
`;

const response = pm.response.json();
const data = {
  response: []
};

// 替换原有仅处理content[0]的单循环逻辑，嵌套遍历所有content元素
response.content.forEach(contentItem => {
  const rowList = [];
  for (let prop in contentItem) {
    if (contentItem.hasOwnProperty(prop)) {
      // 兼容null值展示，避免渲染空白
      const itemVal = contentItem[prop] === null ? 'null' : contentItem[prop];
      rowList.push({
        key: prop,
        val: itemVal
      });
    }
  }
  data.response.push(rowList);
});

pm.visualizer.set(template, data);

增强体验版本（支持数组值、空值的友好展示） #

针对示例接口中的数组类型属性（如Favourite Colours）、null值做渲染优化，可通过注册轻量Handlebars辅助函数实现更美观的展示效果：

var template = `
{{#each response}}
    <table bgcolor="#FFFFFF" style="margin: 0 0 20px 0; border-collapse: collapse; width: 100%;">
        <tr>
            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">Prop</th>
            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">Val</th>
        </tr>
        {{#each this}}
            <tr>
                <td style="padding: 8px; border: 1px solid #ddd;">{{key}}</td>
                <td style="padding: 8px; border: 1px solid #ddd;">
                    {{#if (isArray val)}}
                        {{join val ", "}}
                    {{else if (isNull val)}}
                        <em style="color: #999;">null</em>
                    {{else}}
                        {{val}}
                    {{/if}}
                </td>
            </tr>
        {{/each}}
    </table>
{{/each}}
`;

const response = pm.response.json();
const data = {
  response: []
};

// 遍历所有content元素生成行数据
response.content.forEach(contentItem => {
  const rowList = [];
  for (let prop in contentItem) {
    if (contentItem.hasOwnProperty(prop)) {
      rowList.push({
        key: prop,
        val: contentItem[prop]
      });
    }
  }
  data.response.push(rowList);
});

// 注册模板辅助函数
pm.visualizer.registerHelper('isArray', (val) => Array.isArray(val));
pm.visualizer.registerHelper('join', (arr, sep) => arr.join(sep));
pm.visualizer.registerHelper('isNull', (val) => val === null);

pm.visualizer.set(template, data);

关键语法说明 #

• 模板外层{{#each response}}循环时，上下文this会自动指向当前遍历的、属于content某一项的行列表，不需要手动拼接数据路径
• 内层{{#each this}}会自动切换上下文到当前行的{key, val}对象，直接读取{{key}}和{{val}}即可完成单元格渲染，和之前尝试的#this逻辑完全匹配
• 之前使用#this未生效的核心原因是数据结构没有传入所有数组元素，语法本身没有问题
• 每个数组元素对应生成独立的两列表格，完全对齐“为每个对象生成专属展示表格”的核心需求

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