2023-10-27

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



No comments:

Post a Comment