如何使用把手 (hbs) 迭代嵌套数组和对象？

如何解决如何使用把手 (hbs) 迭代嵌套数组和对象？

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

代码：

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

JSON 截图：

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

解决方法

最后，我设法找到了解决方案。我应该退出 each 循环并连接下一个字符串：

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

,

恭喜您解决了您的问题！

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

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

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

带有 {{title}} 的最终模板是：

#with

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