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

【问题标题】：How to iterate nested array and objects using handlebars (hbs)?如何使用把手 (hbs) 迭代嵌套数组和对象？
【发布时间】：2021-09-30 18:44:03
【问题描述】：

我正在从 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 的屏幕截图：

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

【问题讨论】：

我不确定“我需要的唯一一个特定链接”是什么意思。每张图片看起来只有一个 link，所以它可能是您想要定位的 images 数组中的一张图片？
@76484，你是对的！我只想定位一个链接。我只想在页面上显示一张图片。
你需要表达一些逻辑来确定每个images数组中的哪个图像是你的目标。是第一个吗？最后？你想要哪张图片？

标签： node.js handlebars.js each

【解决方案1】：

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

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

【讨论】：

这不是一个非常明确的答案。你还在使用{{#each image_groups~}} 循环吗？
不，我不应该进入 {{#each image_groups~}} 循环。抱歉，答案不清楚。

【解决方案2】：

恭喜您解决了问题！

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

由于我们已经确定我们不再需要任何#each 循环，因为我们只在第一个图像组的第一张图像之后，我们可以看到我们只剩下<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 供您参考。

【讨论】：