如何使用Handlebars访问并渲染外部API返回JSON嵌套数组的指定属性

解决方法 #

有两种常见的实现方式，可根据你的实际场景选择：

方式一：数组顺序固定时直接用索引访问 #

如果确认AMC Entertainment对应的数据对象始终在数组的第一位（数组索引从0开始计数），假设你将该数组绑定到Handlebars上下文的变量名为stockList，直接用以下语法取值即可：

{{stockList.[0].avgTotalVolume}}

提示：Handlebars中访问数组元素需要用.[]包裹索引，不能直接写stockList[0]的形式。

方式二：数组顺序不固定时动态匹配取值 #

如果数组顺序可能发生变化，你可以自定义Handlebars辅助函数实现按公司名匹配取值，不受顺序影响：

1. 首先在JS逻辑中注册自定义辅助函数（需要在渲染模板前执行）：

// 注册按公司名匹配获取avgTotalVolume的辅助函数
Handlebars.registerHelper('getAmcVolume', function(stockArray) {
  const targetStock = stockArray.find(item => item.companyName.indexOf('AMC Entertainment') > -1);
  return targetStock ? targetStock.avgTotalVolume : '未找到匹配数据';
});

2. 在模板中直接调用该辅助函数即可：

{{getAmcVolume stockList}}

如果需要更通用的匹配逻辑，也可以把匹配关键词作为参数传入辅助函数：

// 通用匹配辅助函数
Handlebars.registerHelper('getVolumeByKeyword', function(stockArray, keyword) {
  const targetStock = stockArray.find(item => item.companyName.includes(keyword));
  return targetStock ? targetStock.avgTotalVolume : '未找到匹配数据';
});

模板调用示例：

{{getVolumeByKeyword stockList "AMC Entertainment"}}

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