如何用handlebar-helpers内置工具按索引位置计算价格总和

DevOps 小满

2026-8-2

问题

要求仅使用handlebars-helpers库的现有工具，对给定JSON payload中的products数组，按product数组的索引位置计算对应价格的总和，预期输出为「20、40、60」。之前尝试用pluck和sum的写法无法生效，无效代码如下：

{{#each products}}
    {{#each product}}
        {{sum (pluck products "product.price")}}
    {{/each}}
{{/each}}

对应JSON payload：

{
  "products": [
    {
      "product": [
        {
          "price": 10
        },
        {
          "price": 20
        },
        {
          "price": 30
        }
      ]
    },
    {
      "product": [
        {
          "price": 10
        },
        {
          "price": 20
        },
        {
          "price": 30
        }
      ]
    }
  ]
}

可行方案

之前的写法失效是因为pluck products "product.price"会把所有product数组里的price提取成一个一维数组，没法按索引分组求和。要实现按索引位置求和，可借助handlebars-helpers里的map、get、sum以及Handlebars内置的@index变量来实现：

最终代码

{{#each (get (first products) "product")}}
  {{sum (map ../products (concat "product[" @index "].price"))}}
  {{#unless @last}}, {{/unless}}
{{/each}}

代码解析

循环次数控制：通过(get (first products) "product")取第一个商品组的product数组来循环，保证循环次数和每个product数组的元素个数一致（前提是所有product数组长度相同）。
提取同索引价格：用map遍历外层products数组，通过concat拼接出当前索引对应的价格路径（比如product[0].price），把每个商品组中对应索引的price提取出来，形成一个同索引价格的数组（比如第一次循环得到[10, 10]）。
求和输出：用sum对同索引价格数组求和，得到对应位置的总和；最后用unless @last添加分隔符，让输出格式符合预期。