如何在Handlebars JS中访问嵌套数组并打印其中对象？

你碰到的这个情况其实很普遍：直接输出嵌套的test数组时，Handlebars会把数组里的对象转换成默认的字符串表示[object Object]——这是因为它不知道你要怎么展示数组里的每一项内容。要正确渲染嵌套数组里的属性，你需要在第一个{{#each}}内部再嵌套一个{{#each}}来遍历test数组。

修正后的Handlebars模板代码 #

{{#each data}}
  <div class="plan-container">
    <h3>{{plan_name}}</h3>
    <p class="desc">{{description}}</p>
    <div class="activity-list">
      <h4>关联活动:</h4>
      {{#each test}}
        <div class="activity-item">
          <p>活动ID: {{id}}</p>
          <p>活动名称: {{activity_name}}</p>
          <p>备注: {{comment}}</p>
        </div>
      {{/each}}
    </div>
  </div>
{{/each}}

代码逻辑说明 #

1. 外层的{{#each data}}负责遍历你的主数据数组，每次迭代时可以直接访问当前对象的plan_name、description和test等属性。
2. 当遇到test这个嵌套数组时，用{{#each test}}再次遍历它——这里的test是当前外层迭代对象的属性，Handlebars会自动识别为当前项对应的嵌套数组。
3. 在内部的{{#each}}里，你就能直接访问每个活动对象的id、activity_name、comment等具体属性了。

渲染效果示例 #

假设用你给出的第一个数据对象来渲染，最终会生成类似这样的HTML结构：

<div class="plan-container">
  <h3>foo</h3>
  <p class="desc">foo bar</p>
  <div class="activity-list">
    <h4>关联活动:</h4>
    <div class="activity-item">
      <p>活动ID: 44</p>
      <p>活动名称: bar</p>
      <p>备注: var</p>
    </div>
    <div class="activity-item">
      <p>活动ID: 45</p>
      <p>活动名称: var</p>
      <p>备注: bar</p>
    </div>
  </div>
</div>

额外优化提示 #

如果你的test数组可能为空，可以加个{{#if test}}判断，避免渲染出空的标题或容器：

{{#each data}}
  <div class="plan-container">
    <h3>{{plan_name}}</h3>
    <p class="desc">{{description}}</p>
    {{#if test}}
      <div class="activity-list">
        <h4>关联活动:</h4>
        {{#each test}}
          <div class="activity-item">
            <p>活动ID: {{id}}</p>
            <p>活动名称: {{activity_name}}</p>
            <p>备注: {{comment}}</p>
          </div>
        {{/each}}
      </div>
    {{/if}}
  </div>
{{/each}}

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