javascripthtmlnode.jsexpresshbs

hide element if express is returning empty values


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


Solution

  • 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.