Passing data to view handlebars not showing. (Express-Handlebar, Node JS)

Question

I am having some trouble with sending data to handlebars view. After rendering the view, the query is fine (I have logged the data and it is correct), but I don't know why the handlebars view does not include the data. Here's the code that sends the data and renders the view:

    // 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) {
    }
}

And here's the code from the handlebars view:

<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>

Answer 1

I've just found the way to handle this issue. Because handlebars 4.6.0 and later versions restrict access to prototype properties and methods for security reasons. So just convert the data (results) from the SQL query to string and convert it back to object to ensure that the data pass to handlebars templates is free from prototype properties and methods. Here is the code:

res.render('showtimes/suaLichChieu', {
  title: 'Sửa Lịch Chiếu Phim',
  objectLichChhieu: JSON.parse(JSON.stringify(results)),
}); 

I hope that this solution is helpful for you guys.