1

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.

check sample output

Bilal Ahmad
  • 75
  • 1
  • 7

3 Answers3

1

You can use build-in helper if.

sebastian.zawolanski
  • 172
  • 6
1

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.

Muralidharan Arivagaran
  • 26
  • 1
1

Use {{#if}} . I guess it will solve your problem

Arunava
  • 11
  • 2