如何使用车把（hbs）迭代嵌套数组和对象？

Question

我正在从 JSON 迭代嵌套数组。有些对象嵌套在几个级别中。我需要从 image_groups 属性中的第二个数组中获取第一张图像。到目前为止，我已经设法达到了 link 属性，但我无法选择唯一一个我需要的特定 link 而不是图像中的所有 link数组。

代码：

<div class="col-md-4">
   {{#each image_groups~}}
   {{#each images~}}
   <h6>{{title}}</h6>
   <img src="../images/{{link}}" alt="{{alt}}">
   {{/each}}
   {{/each}}
</div>

JSON的截图：

它在浏览器中的显示方式：

Answer 1

终于，我找到了解决办法。我应该退出 each 循环并键入下一个字符串：

<img
 src="../images/{{image_groups.0.images.0.link}}"
 alt="{{image_groups.0.images.0.alt}}"
>

Answer 2

恭喜您解决了问题！

我想提出一个替代解决方案，我认为它可以使模板更简洁。

因为我们已经确定我们不再需要 #each 循环中的任何一个，因为我们只需要第一个 image_group 的第一个图像，我们可以看到我们只剩下 <h6> 和 <img> 标签。为这两个标签填充的值都来自我们的目标图像对象。

我建议使用 Handlebars 的 #with built-in helper。这个助手允许我们为模板的一部分设置数据上下文。将上下文设置为我们的目标图像对象将使我们免于重写其长路径，从而使我们能够简单而干净地访问其属性，例如 {{title}}.

带有 #with 的最终模板将是：

<div class="col-md-4">
  {{#with image_groups.[0].images.[0]}}
    <h6>{{title}}</h6>
    <img
      alt="{{alt}}"
      src="{{link}}"
    >
  {{/with}}
</div>

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

如何使用车把（hbs）迭代嵌套数组和对象？

How to iterate nested array and objects using handlebars (hbs)?

node.js

handlebars.js

each