Express中main.js数据无法传递至bookings.hbs的问题求助

我尝试从路由文件main.js向bookings.hbs模板传递数据，但无法正常显示。将相同数据传递至index.hbs模板时却能正常工作，请求帮忙排查错误所在。

App.js代码 #

const express = require("express");
const routes = require('./routes/main');
const hbs = require("hbs");
const mongoose = require("mongoose");
const RoomData = require("./models/rooms");
require("dotenv").config();

const app = express();

// Middleware to parse json
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// Middleware fore static files and routes
app.use('/static',express.static("public"));
app.use('',routes);

// template engine
app.set('view engine', 'hbs');
app.set("views", "views");
hbs.registerPartials("views/partials");

// db connection
mongoose.connect("mongodb://localhost/Hotel-Admin").
then(()=>{
   
    console.log("Database Connected")
}).
catch((e)=>{
    console.log(e);
})

app.listen(process.env.PORT , ()=>{
    console.log(`Server Started at port ${process.env.PORT}`);
    // console.log(process.env.PORT);
})

路由文件 - main.js #

const express = require('express');
const routes = express.Router();
const roomData = require("../models/rooms");
const bookings = require("../models/bookings");

routes.get("/", async (req,res)=>{
    const roomA = await roomData.find({"type":"A"});
    const roomB = await roomData.find({"type":"B"});
    const roomC = await roomData.find({"type":"C"});
    res.render("index",{
        roomA:roomA,
        roomB:roomB,
        roomC:roomC,
    });
})

// 向bookings.hbs传递数据但无显示
routes.get("/bookings", async(req,res)=>{
    const bookingsData = await bookings.find();
    console.log(bookingsData); // 控制台能打印数据
    res.render("bookings",bookingsData); // 此处无法生效
})


routes.post("/submit", async(req,res)=>{
    try{
        const bookingData = new bookings({
            name : req.body.name,
            email: req.body.email,
            totalGuests: req.body.totalGuests,
            checkIn: req.body.start,
            checkOut: req.body.end
        });

        console.log(bookingData);

        await bookingData.save().then(()=>{
            res.redirect("/");
        })
    }catch(error){
        console.error(error);

    }
})
module.exports = routes;

bookings.hbs模板代码 #

{{!-- head --}}
{{>head}}
<body>
{{!--navbar--}}
{{>navbar data}}

{{!-- Filter Section --}}
 <div class="filter">
      <form action="">
        <label for="startDate">Start Date</label>
        <input type="date" name="startDate" id="startDate" />

        <label for="endDate">End Date</label>
        <input type="date" name="endDate" id="endDate" />

        <label for="roomType">Room Type</label>
        <select id="roomType" name="roomType">
          <option value="All">All</option>
          <option value="A">A</option>
          <option value="B">B</option>
          <option value="C">C</option>
        </select>

        <div class="filter-btn">
          <input id="filter-submit" type="submit" value="Submit" />
          <input id="filter-reset" type="reset" value="Reset" />
        </div>

      </form>

    </div>

      <!-- Booking card -->
    {{bookingsData}}   {{!-- 尝试打印数据但无显示--}}
    <div class="booking-cards-section">
      {{#each bookingsData}}
      <div class="bookings-card">
        <span>Booking Details</span>
        <div class="details">
          <span><b>Email</b>: {{this.email}}</span>
          <span> <b>Guest Name:</b>{{this.name}}</span>
          <span> <b>Duration:</b>  24 hours</span>
          <span> <b>Room:</b> Savia LR-1 </span>
          <span> <b>Amount:</b> ₹1680</span>
          <span> <b>Check In:</b> December 28th 2023</span>
          <span> <b>Check Out:</b>Jab 28th 2024</span>
          <div class="bookings-btn">
            <button type="submit" id="bookings-submit-btn">Submit</button>
            <button type="submit" id="bookings-edit-btn">Edit</button>
          </div>
        </div>
      </div>
      {{/each}}
</div>

    
</body>
</html>

问题原因与修复方案 #

核心错误 #

在/bookings路由中，你直接将查询到的数组bookingsData传递给了res.render()，但HBS模板期望接收的是一个包含键值对的对象，模板通过键名来访问对应的数据。

原错误代码：

res.render("bookings", bookingsData); // 直接传递数组，模板无法识别键名

正确写法：将数组包裹在对象中，指定与模板匹配的键名

res.render("bookings", { bookingsData }); // 等价于 { bookingsData: bookingsData }

为什么index.hbs能正常工作？ #

首页路由中传递的是标准键值对对象，模板可以通过roomA、roomB等键名直接访问对应数据，符合HBS的接收规则：

res.render("index",{
    roomA:roomA,
    roomB:roomB,
    roomC:roomC,
});

验证修改 #

修改后，模板中的{{bookingsData}}会正常打印数组内容，{{#each bookingsData}}也能遍历数据渲染预订卡片。

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