Express-Handlebars传数据至视图不显示问题（Node.js）

使用Node.js的Express-Handlebars框架时，数据库查询结果已通过日志验证正确，但视图中无法显示传递的数据。

后端代码 #

// GET[]/lichchieu/sua
async suaLichChieu(req,res){
    try{
        const idLichChieu=req.params.idLichChieu;
        const selectedQuery=`SELECT p.tenPhim,t.idLichChieu,t.ngayChieu,t.caChieu,t.giaPhim,t.ngayThem, c.tenPhongChieu FROM lichchieu t, Phim p , phongchieu c
        WHERE t.idPhim=p.idPhim and t.idPhongChieu=c.idPhongChieu and t.idLichChieu=?`;
        connection.query(selectedQuery,[idLichChieu],(err,results)=>{
            
            console.log('Chi tiết',results)
            res.render('showtimes/suaLichChieu', {
                title: 'Thêm Lịch Chiếu Phim',
                objectLichChhieu: results,
            }); 
  
        })
    } catch(err) {
    }
}

视图代码 #

<form action="/lichchieu/sua/{{objectLichhieu.idLichChieu}}?_method=PUT" method="POST" class="container-form-add mx-auto" style="max-width: 900px;">
    <div class="row">
        <div class="col-sm-12">
            <div class="mb-3">
                <label class="form-label" for="idPhim">Tên Phim</label>
                <input type="text" value="{{objectLichhieu.tenPhim}}">
            </div>
            <div class="mb-3">
                <label class="form-label" for="idPhongChieu">Phòng chiếu</label>
                <input type="text" value="{{objectLichhieu.tenPhongChieu}}">
            </div>
            <div class="mb-3">
                <label class="form-label" for="caChieu">Ca Chiếu</label>
                <input type="text" value="{{objectLichhieu.caChieu}}">
            </div>                              
            <div class="mb-3">
                <label class="form-label" for="showDate">Ngày chiếu</label>
                <input class="form-control" value="{{objectLichhieu.ngayChieu}}" name="ngayChieu" required name="ngayChieu" id="ngayChieu" type="date" data-date="" data-date-format="DD MMMM YYYY"  aria-describedby="helpId" />
            </div>
            <div class="mb-3">
                <label class="form-label" for="price">Giá phim</label>
                <input class="form-control" value="{{objectLichhieu.giaPhim}}" required type="number" name="giaPhim" id="giaPhim" aria-describedby="helpId" />
            </div>
        </div>
    </div>
    <div class="text-center">
        <button class="btn btn-primary" type="submit" style="padding: 10px; min-width: 400px; font-weight: bold; margin: 10px;">Thêm mới</button>
    </div>
</form>

错误分析与修复 #

核心问题：变量名拼写不一致 #

后端传递的变量名为objectLichChhieu，而视图中使用的是objectLichhieu（少了一个大写的C），导致Handlebars无法匹配到对应数据，这是数据无法渲染的直接原因。

额外注意：数据库查询结果的数组结构 #

connection.query返回的results是一个数组（即使仅查询到单条数据），直接传递数组的话，视图中无法直接访问对象属性，需要先取出数组中的第一个元素。

修复后的代码 #

后端代码

// GET[]/lichchieu/sua
async suaLichChieu(req,res){
    try{
        const idLichChieu=req.params.idLichChieu;
        const selectedQuery=`SELECT p.tenPhim,t.idLichChieu,t.ngayChieu,t.caChieu,t.giaPhim,t.ngayThem, c.tenPhongChieu FROM lichchieu t, Phim p , phongchieu c
        WHERE t.idPhim=p.idPhim and t.idPhongChieu=c.idPhongChieu and t.idLichChieu=?`;
        connection.query(selectedQuery,[idLichChieu],(err,results)=>{
            if(err) throw err; // 抛出错误到catch块处理
            
            console.log('Chi tiết',results)
            // 取出数组中的单条数据
            const lichChieuData = results[0];
            res.render('showtimes/suaLichChieu', {
                title: 'Thêm Lịch Chiếu Phim',
                objectLichChieu: lichChieuData, // 统一正确的变量名
            }); 
  
        })
    } catch(err) {
        console.error('查询或渲染出错:', err); // 添加错误日志便于排查
    }
}

视图代码

<form action="/lichchieu/sua/{{objectLichChieu.idLichChieu}}?_method=PUT" method="POST" class="container-form-add mx-auto" style="max-width: 900px;">
    <div class="row">
        <div class="col-sm-12">
            <div class="mb-3">
                <label class="form-label" for="idPhim">Tên Phim</label>
                <input type="text" value="{{objectLichChieu.tenPhim}}">
            </div>
            <div class="mb-3">
                <label class="form-label" for="idPhongChieu">Phòng chiếu</label>
                <input type="text" value="{{objectLichChieu.tenPhongChieu}}">
            </div>
            <div class="mb-3">
                <label class="form-label" for="caChieu">Ca Chiếu</label>
                <input type="text" value="{{objectLichChieu.caChieu}}">
            </div>                              
            <div class="mb-3">
                <label class="form-label" for="showDate">Ngày chiếu</label>
                <input class="form-control" value="{{objectLichChieu.ngayChieu}}" name="ngayChieu" required id="ngayChieu" type="date" data-date="" data-date-format="DD MMMM YYYY"  aria-describedby="helpId" />
            </div>
            <div class="mb-3">
                <label class="form-label" for="price">Giá phim</label>
                <input class="form-control" value="{{objectLichChieu.giaPhim}}" required type="number" name="giaPhim" id="giaPhim" aria-describedby="helpId" />
            </div>
        </div>
    </div>
    <div class="text-center">
        <button class="btn btn-primary" type="submit" style="padding: 10px; min-width: 400px; font-weight: bold; margin: 10px;">Thêm mới</button>
    </div>
</form>

修复要点总结 #

1. 统一后端与视图中的变量名拼写，确保完全一致
2. 处理数据库查询返回的数组结构，取出目标数据对象再传递给视图
3. 在catch块中添加错误日志，方便后续排查问题

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