Firebase到HTML页面:如何在数据库中没有值时不打印'undefined'

92dk7w1h  于 2022-11-20  发布在  其他
关注(0)|答案(1)|浏览(123)

我希望我能提供所有需要的东西来解释我的问题。我完全不擅长剧本,所以请原谅我的愚蠢...请教我变得更好。
所以你会在这里找到我的剧本。
我要显示符合“今天或将来”日期的所有记录。到目前为止一切顺利。
现在有些记录没有字段艺术家。然后输出是“未定义的”。有没有办法解决这个问题...只是在值和字段不存在时不打印任何东西?

<script src="https://www.gstatic.com/firebasejs/7.2.0/firebase.js"></script>

    <script>
    // Set the configuration for your app

    var config = {
      apiKey: "xxx",
      authDomain: "xxx",
      databaseURL: "xxx",
      storageBucket: "xxx"
      };
      firebase.initializeApp(config);

    // Get a reference to the database service

    //var db = firebase.database();
    const preObject = document.getElementById('Agenda');
    const ulList = document.getElementById('AgendaList');

    // Create references

    const dbRefObject = firebase.database().ref().child('Event');

    // Synch object changes

    dbRefObject.orderByChild("Date").startAt(new Date().toISOString().slice(0,10)).on('child_added', snap => {

    var data = [];
    const li = document.createElement('li');
    var JSONValue = snap.val();

    // create a variable that checks wheater or not there is a picture. If there is a picture print the picture if not do not print anything
    var photo = "";
    if (JSONValue['Photo']!==undefined) {
      photo='<img class="photo" src="'+JSONValue['Photo']+'">'; 
    }

    // check the value of the status field. If the status is Cancelled, print the status. else do not print anything
    var status = ""; 
    if (JSONValue['Status']==='Geannuleerd') {
      status='<span class="status">'+JSONValue['Status']+'</span>';
    }

    // check the value of the message field. If the message is nieuwsbericht then do not print the date. Else print the date.
    var date = "";
    if (JSONValue['Message']==='Concert') {
      date=JSONValue['FullDate'] + '-' + JSONValue['ShortTime']; 
    }

    // check the value of the message field. If the message is nieuwsbericht then do not print the date. Else print the date.
    var title = "";
    if (JSONValue['Message']==='Concert') {
      title=JSONValue['Concert']; 
    }   

    li.innerHTML = '<div class="event">'+photo+'<h3>' +date+ '</h3>' + '<h1>' +title+ '</h1>' + JSONValue['Artists'] + '</div>';
    li.id = snap.key;
    ulList.appendChild(li);

    });
    </script>

enter image description here

nfs0ujit

nfs0ujit1#

如果JSONValue['Artists']未定义,您可以使用逻辑“OR”运算符(写为||)有条件地显示其他内容。

JSONValue['Artists'] || ""

这基本上意味着“获取JSONValue['Artists']的值,或者如果它的值为falsy(未定义、空、空、零、假),则使用空字符串代替”。
代码中的相关行将是:

li.innerHTML = '<div class="event">'+photo+'<h3>' +date+ '</h3>' + '<h1>' +title+ '</h1>' + (JSONValue['Artists'] || "") + '</div>';

我在JSONValue['Artists'] || ""周围添加了括号,以明确操作顺序。
您还可以使用其他方法作为备用方法:

JSONValue['Artists'] || "No artists for this concert"

您可以在此处阅读有关逻辑运算符的更多信息:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators
注意:如果有效的艺术家名称包括“”(空白字符串)、“0”和0,则此技术可能会给您带来意外的结果。所有这些值都是错误的。
换句话说,下面的代码将计算为“No artist for this concert”:

"0" || "No artists for this concert"

要缓解这种情况,可以使用Nullish coalescing operator (??)

相关问题