How can I access object properties in my .hbs template?

31 Views Asked by At

I have a webpage that needs to display informations about Cars at a dealership. All is well, except, I cannot access object properties from inside the .hbs view template.

Here's what I have: 1 - The route that renders the page:

router.get('/item', async function (req, res) {
    let car = await Car.findOne()
    console.log("Got one car to show: " + car)
    res.render('item', { car : car, layout: 'index' });
});

2 - inside the item.hbs, I want to display the information:

<h4 class="text-gray-dark mb-3">FOR RENT
   <strong>$ {{ car.priceModel }}</strong>
   PER DAY
</h4>
<h1 class="mb-3">
   <b class="text-gray-dark">{{ car.year }}</b>
   <span>{{{ car.model }}}</span> // I know I am using triple {{{}}} 
</h1>

3 - the problem is, car.priceModel and car.model don't display anything. If I were to use just car, it would output the whole object, as a string. so, I tried the following:

res.render('item', { car : JSON.stringify(car), layout: 'index' });

In this particular case, when using { car }, I would get [object Object], but still, trying to access {{ car.model }} would yield no result.

What am I actually doing wrong? I have seen some tutorials working exactly like this and the hbs views rendered fine. What am I missing?

1

There are 1 best solutions below

0
nightfixed On

After @76484 gave me a hint, I solved this by configuring Handlebars as follows:

app.engine('hbs', handlebars.engine({
    runtimeOptions: {
        allowProtoPropertiesByDefault: true,
        allowProtoMethodsByDefault: true
    }
}));