I'm creating app on nodejs and express. I'm getting json data from endpoint and rendering it on page according to values that I'm getting.
Problem is that, If I get null or undefined value from json data, how will I hide the whole element.
here's my code :
var obj = JSON.parse(body)
res.render("index", {
name : `${obj.data.name}`,
uname : `${obj.data.username}`,
bio : `${obj.data.bio}`,
location : `${obj.data.location}`,
link : `${obj.data.website}`
rendering values on hbs template page :
<div class="ml-9 w-full mt-1 px-3 mb-5 inline-block">
<div class="inline-block mr-5">
<i class="fas fa-map-marker-alt text-lg opacity-75 inline"></i>
<p class="text-xl inline ml-2 bio">{{location}}</p>
</div>
<div class="inline-block mx-5">
<i class="fas fa-link text-lg opacity-75 inline"></i>
<p class="text-xl inline ml-2 link text-blue-400">{{link}}</p>
</div>
<div class="inline-block mx-5">
<i class="fas fa-calendar-alt text-lg opacity-75 inline"></i>
<p class="text-xl inline ml-2 bio">{{join}}</p>
</div>
</div>
Now, If I get null or undefined location or bio, how will I hide the whole div.
You can use IF condition inside the hbs template.
{{#if location}}
<p class="text-xl inline ml-2 bio">{{location}}</p>
{{/if}}
It will print the value only if it presents.