Didn't get any dynamic content on web page using view/template engine (Handlebars)
I am using Handlebars template engine. Not getting any error at console but I am not able to display dynamic content in the index.hbs file which is rendered from app.js
app.js
const express = require('express');
const app = express();
app.set('view engine','hbs');
app.use(express.urlencoded({extended:true})); //to get the html form data
app.use(express.static('./public'));
app.use(express.json());
app.get('/',(req,res)=>{
res.render('index.hbs');
});
app.post('/', async (req,res)=>{
const currentCity = req.body.city;
let WRAP_DATA = await getCityWeather(currentCity); //getCityWeather function return weather by city
console.log('Weather Info = ',WRAP_DATA); // successfully got the WRAP_DATA
res.render('index.hbs',{WRAP_DATA});
});
At console I got WRAP_DATA successfully
description: 'overcast clouds',
humidity: 53,
visibility: 10,
windSpeed: 2.592,
winddeg: 32
index.hbs
"It is located inside view folder and display HTML&CSS properly only problem is replacing dynamic data". I am mentioning code where I used hbs tags only.
<table>
<tr class="detail">
<td> <img src="../img/humidity.png" class="desc_icon"> </td>
<td class="label">Humidity</td>
<td class="value"> %</td>
</tr>
<tr class="detail">
<td> <img src="../img/visibility.png" class="desc_icon"> </td>
<td class="label">Visibility</td>
<td class="value"> km</td>
</tr>
<tr class="detail">
<td> <img src="../img/windspeed.png" class="desc_icon"> </td>
<td class="label">Wind Speed</td>
<td class="value"> km/h</td>
</tr>
<tr class="detail">
<td> <img src="../img/direction.png" class="desc_icon"> </td>
<td class="label">Wind Direction</td>
<td class="value"> °</td>
</tr>
</table>
when I run my project my backend works fine but above mentioned WRAP_DATA values are not displaying at their position in index.hbs
Comments
Post a Comment