Fatal编程技术网
  • javascript/
  • Javascript 为什么我的页面只显示标题而不显示在cloud Firestore中创建的数据？

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

javascript html firebase google-cloud-firestore

Javascript 为什么我的页面只显示标题而不显示在cloud Firestore中创建的数据？,javascript,html,firebase,google-cloud-firestore,Javascript,Html,Firebase,Google Cloud Firestore,我不熟悉HTML，我正在使用这段代码显示来自我的google云平台的书籍评论。但是，每当我运行代码时，只会显示标题“我的书评”。我还有一个用于连接Firestore的JavaScript文件。有人能帮我吗 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport"

我不熟悉HTML，我正在使用这段代码显示来自我的google云平台的书籍评论。但是，每当我运行代码时，只会显示标题“我的书评”。我还有一个用于连接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>



问题可能来自这样一个事实，即您正在向DOM添加不完整的元素，而DOM可能试图在错误发生后尽快修复它解释为错误的内容

当您附加结束标记（假定它将构造正确的HTML元素）时，开始标记可能已从DOM中删除

在您调用的每个循环上：


$（'#reviewList'）。追加（''；



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

当您打电话时：


$（'#reviewList'）。追加（''；


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

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

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


//获取评论集合的实时数据快照（即自动刷新）
db.收集（“审查”）
.orderBy（“账面评级”、“说明”）
.onSnapshot（（querySnapshot）=>{
让html=''；
//如果以后要重写内容，则无需清空该表
//$（“#审阅列表”）.empty（）；
​
//循环浏览快照数据并添加到HTML表
querySnapshot.forEach（（doc）=>{
const data=doc.data（）；
html+=`${data.book_name}${data.book_rating}/5`；
});
​ // 如果愿意，只使用$（'#reviewList'）选择器一次，代价很高
//重用它，使用常量缓存它
$（'#reviewList'）.html（html）；
//显示审核计数
$（'#mainttitle'）.html（querySnapshot.size+“列表中的书评”）；
});

谢谢，问题解决得很好：）

// 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");
});