数据表只显示一个条目

Question

我已从 Firestore 集合中检索数据并将它们存储在一个数组中。我已经使用该数组将数据注入数据表，但是一旦加载数据表只显示一个条目，但我已经获取了 firestore 集合中的所有文档。可能是什么问题呢？下面是javascript代码和html

<table class="table table-striped table-bordered" style="width:fit-content; " id="mydatatable">
  <thead>
    <tr>
      <th scope="col">Document id</th>
      <th scope="col">title</th>
      <th scope="col">details</th>
      <th scope="col">timestamp</th>
      <th scope="col">name</th>
    </tr>
  </thead>

  <tbody id="tableBody">
  </tbody>

  <tfoot>
    <tr>
      <th scope="col">Document id</th>
      <th scope="col">title</th>
      <th scope="col">details</th>
      <th scope="col">timestamp</th>
      <th scope="col">name</th>
    </tr>
  </tfoot>
</table>

var table = document.getElementById('tableBody');
var tableData = new Array();

db.collection("Emergency_Feeds").orderBy("timestamp", "desc").onSnapshot(function (querySnapshot) {

  querySnapshot.docChanges().forEach(function (change) {

    console.log('documents retrieved successfully');
    console.log(`is here: ${change.doc.id} => ${change.doc.data().name}`);

    var documentId = change.doc.id;
    var username = change.doc.data().name;
    var emTitle = change.doc.data().title;
    var emDets = change.doc.data().details;
    var emTimeDate = change.doc.data().timestamp.toDate();

    if (change.type === "added") {
      tableData = [
        [
          documentId,
          emTimeDate,
          emTitle,
          emDets,
          username
        ]
      ]

      $('#mydatatable').DataTable({
        retrieve: true,
        data: tableData
      });
    }

    if (change.type === "modified") {
      tableData = [
        [
          documentId,
          emTimeDate,
          emTitle,
          emDets,
          username
        ]
      ]

      $('#mydatatable').DataTable({
        retrieve: true,
        data: tableData
      });
    }

    if (change.type === "removed") {
      tableData = [
        [
          documentId,
          emTimeDate,
          emTitle,
          emDets,
          username
        ]
      ]

      $('#mydatatable').DataTable({
        retrieve: true,
        data: tableData
      });
    }
  });
});

Answer 1

如doc、querySnapshot.docChanges() 中所述

返回自上次快照以来文档更改的数组。如果 这是第一个快照，所有文档都将在列表中添加 变化。

通过在此数组上调用forEach，您将循环访问不同的DocumentChange，并且对于每个更改，您都将使用这个特定的DocumentChange 重新定义数据表的内容。因此，您的表格只有一个元素。

因此，您应该通过仅添加/替换/删除相应的DocumentChange、使用Array methods（如push()、splice() 等）来正确管理表数据填充。大致如下（未经测试）：

var table = document.getElementById('tableBody');
var tableData = new Array();

db.collection("Emergency_Feeds").orderBy("timestamp", "desc").onSnapshot(function (querySnapshot) {

  querySnapshot.docChanges().forEach(function (change) {

    console.log('documents retrieved successfully');
    console.log(`is here: ${change.doc.id} => ${change.doc.data().name}`);

    var documentId = change.doc.id;
    var username = change.doc.data().name;
    var emTitle = change.doc.data().title;
    var emDets = change.doc.data().details;
    var emTimeDate = change.doc.data().timestamp.toDate();

    if (change.type === "added") {
      tableData.push(
        [
          documentId,
          emTimeDate,
          emTitle,
          emDets,
          username
      ]);

    }

    if (change.type === "modified") {
        //..... 
        //Here update the table element
        // Note that the DocumentChange contains the old and new index
    }

    if (change.type === "removed") {
        //..... 
        //Here remove the table element
    }
  });

  $('#mydatatable').DataTable({
      retrieve: true,
      data: tableData
  });

});