[SOLVED] Can anyone explain me why my data is not coming to my hbs file

Can anyone explain me why my data is not coming to my hbs file

I am trying to send data from my main.js file to bookings.hbs file and it's not working. If I send the same data to my index.hbs file it is working. Can anyone tell me where I am getting the error?

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);
})

Routing file - 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,
    });
})

// Sending data to bookings.hbs file but no data is showing there.
routes.get("/bookings", async(req,res)=>{
    const bookingsData = await bookings.find();
    console.log(bookingsData); // Here data is printing in the console
    res.render("bookings",bookingsData); // This not working 
})


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}}   {{!-- Trying to print data just to check whether it is coming, but it's not coming here--}}
    <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>

I have tried sending same data to index.hbs file and it was working fine. I don't know what is the issue with this file. Can someone help me please?

I have pasted the file structure and the code. Please help me.

Solution

The mongoose Model.find() returns an array so when you send data to your .hbs file just assign the array to an object property like so:

res.render("bookings", {bookingsData: bookingsData});

or shorthand:

res.render("bookings", {bookingsData});