Express.js中Handlebars无法渲染数组元素问题求助

问题核心 #

站点基础信息能正常渲染，但Fuel数组无法通过Handlebars的#each遍历展示，已确认后端获取的数据包含完整的Fuel数组内容。

解决方案 #

问题出在Mongoose默认返回的是Document实例对象，而非普通JavaScript对象，Handlebars的#each helper对这种包装过的数组兼容性不佳。只需将Mongoose返回的文档转换为普通JS对象即可解决：

方法1：查询时使用lean() #

在Mongoose查询中添加lean()，直接获取普通JS对象：

app.get("/Manager", async (req, res) => {
    try {
        // 添加lean()获取普通对象
        let stationData = await business.getStation(1001).lean();
        console.log("Station Data:", stationData);
        console.log("Fuel Details:", stationData.Fuel);
        res.render('ManagerPage', {
            layout: undefined,
            station: stationData
        });
    } catch (error) {
        console.error("Error fetching station data:", error);
        res.status(500).send("Internal Server Error");
    }
});

方法2：将Document转换为普通对象 #

如果无法修改getStation函数的查询逻辑，可在获取数据后调用toObject()转换：

let stationData = await business.getStation(1001);
// 转换为普通JS对象
stationData = stationData.toObject();

验证步骤 #

1. 在路由中添加console.log(Array.isArray(stationData.Fuel))，如果输出false，说明当前Fuel是Mongoose的DocumentArray而非普通数组。
2. 转换为普通对象后再次打印，确认Array.isArray(stationData.Fuel)输出true，此时Handlebars即可正常遍历。

排除其他可能 #

• 已确认模板中{{#each station.Fuel}}的字段名（this.type、this.price等）与MongoDB数据完全匹配，不存在大小写或命名错误。
• 若仍有问题，检查Mongoose Schema中Fuel字段是否正确定义为数组类型：

  const stationSchema = new mongoose.Schema({
    StationID: Number,
    Name: String,
    Location: String,
    Manager: String,
    // 正确定义数组类型
    Fuel: [{
      type: String,
      price: Number,
      remaining: Number
    }]
  });
  

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