Node.js + hbs环境下JSON解析后前端数据无法渲染的问题求助

嘿，我来帮你搞定这个渲染问题～ 核心原因其实很简单：你的JSON里product_one和product_two都是数组类型，而不是单个对象，所以直接通过products.product_one.price访问属性是找不到值的。

问题拆解 #

先看你的JSON结构：

{ 
  "product_one": [ 
    { "name": "Laptop", "price": 799 } 
  ], 
  "product_two": [ 
    { "name": "Laptop", "price": 799 } 
  ] 
}

这里product_one是一个包含单个商品对象的数组，你需要先定位到数组里的元素，再去访问它的price属性。

修复方案 #

方案1：直接访问数组索引

把你的前端HBS代码修改为：

<small>Price: £{{products.product_one[0].price}} </small>

或者HBS也支持另一种写法：

<small>Price: £{{products.product_one.[0].price}} </small>

两种写法都能正确获取数组第一个元素的price值。

方案2：用each循环遍历（推荐）

如果未来你的product_one数组可能会添加多个商品，用each循环渲染会更灵活，代码如下：

{{#each products.product_one}}
  <div>
    <p>Name: {{this.name}}</p>
    <small>Price: £{{this.price}}</small>
  </div>
{{/each}}

这样不管数组里有几个商品，都会自动遍历渲染出来。

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