为什么我的页面只显示标题而不显示在 Cloud Firestore 中创建的数据？答案

【问题标题】：Why does my page only display the title and not the data created in cloud Firestore?为什么我的页面只显示标题而不显示在 Cloud Firestore 中创建的数据？
【发布时间】：2021-08-13 01:56:46
【问题描述】：

我是 HTML 新手，我正在使用此代码显示来自我的谷歌云平台的图书评论。但是，每当我运行代码时，只会显示标题“我的书评”。我还有一个用于连接 Firestore 的 JavaScript 文件。有人可以帮我吗

<!doctype html>
<html lang="en">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
   <!-- Bootstrap CSS -->
   <link rel="stylesheet" " crossorigin="anonymous">
 
   <!-- Firebase JS -->
   <script src="https://www.gstatic.com/firebasejs/8.3.0/firebase.js"></script>
   <script src="https://www.gstatic.com/firebase/firebase-firestore.js"></script>
   <title>store reviews</title>
 </head>
 <body>
       <div class="container">
         <h1 id="mainTitle">My store reviews</h1>
         <table id="reviewList" class="table"></table>
       </div>

       <!-- Bootstrap JavaScript -->
        crossorigin="anonymous"></script>
       <script crossorigin="anonymous"></script>
       <script src="myscripts.js"></script>
 </body>
</html>

还有 javascript 文件：

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
var db = firebase.firestore();

// Get a live data snapshot (i.e. auto-refresh) of our Reviews collection
db.collection("Reviews") {


    // Empty HTML table
    $('#reviewList').empty();
   
    // Loop through snapshot data and add to HTML table
    querySnapshot.forEach((doc) => {
      $('#reviewList').append('<tr>');
      $('#reviewList').append('<td>'  + doc.data().store_name + '</td>');

      $('#reviewList').append('</tr>');
    });
   
    // Display review count
    $('#mainTitle').html(querySnapshot.size + " book reviews in the list");
});

【问题讨论】：

标签： javascript html firebase google-cloud-firestore

【解决方案1】：

问题可能来自您将不完整的元素附加到 DOM 的事实，这可能是在尝试修复它解释为错误的内容。

当你附加结束标记时，你认为它会构造一个正确的 HTML 元素，开始标记可能已经从 DOM 中删除了。

在您调用的每个循环中：

$('#reviewList').append('<tr>');

append() 在调用它时会在 DOM 中添加一个 <tr>，但是此时没有结束标记，浏览器会将其解释为不正确的 HTML 并尝试更正，我认为不同的浏览器在这里可能会做不同的事情，但可能是他们都只是删除了标签，您可以尝试从控制台调用该行以查看结果。

到你打电话的时候：

$('#reviewList').append('</tr>');

您之前尝试添加的开头 <tr> 标记可能已从 DOM 中消失，因此引擎也会将此视为不正确的 HTML 并修复它。

我没有试过你的代码，我可能是错的，错误可能在其他地方，但它可能在那里，你应该很容易尝试下面的代码，看看它是否适用于你的凡士通数据。

你可以在foreach的每次迭代中构造并追加一行，但是你想尽量减少插入，我认为最好构造一个字符串你的 HTML 并且只做一次插入，这样 DOM 只需要重新绘制一次。

// Get a live data snapshot (i.e. auto-refresh) of our Reviews collection
db.collection("Reviews")
  .orderBy("book_rating", "desc")
  .onSnapshot((querySnapshot) => {

    let html = '';

    // No need to empty the table if you are going to rewrite the contents later
    // $('#reviewList').empty();
   
    // Loop through snapshot data and add to HTML table
    querySnapshot.forEach((doc) => {
      const data = doc.data();
      html += `<tr><td>${data.book_name}</td><td>${data.book_rating}/5</td></tr>`;
    });

    // Only use the $('#reviewList') selector once, expensive, if you want to 
    // reuse it, cache it using a constant
    $('#reviewList').html(html);
    // Display review count
    $('#mainTitle').html(querySnapshot.size + " book reviews in the list");
});

【讨论】：