1

我正在nodejs和express上创建应用程序。我从端点获取 json 数据并根据我得到的值在页面上呈现它。

问题是，如果我从 json 数据中获得 null 或 undefined 值，我将如何隐藏整个元素。

这是我的代码：

        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}`

在 hbs 模板页面上呈现值：

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

现在，如果我得到空或未定义的位置或生物，我将如何隐藏整个 div。

检查样本输出

4

3 回答 3

1

如果. _

于 2021-08-17T10:45:44.160 回答
1

您可以在 hbs 模板中使用 IF 条件。

{{#if location}}
<p  class="text-xl inline ml-2 bio">{{location}}</p>
{{/if}}

仅当它出现时才会打印该值。

于 2021-08-17T10:50:50.217 回答
1

使用 {{#if}} 。我想它会解决你的问题

于 2021-08-17T10:56:37.870 回答