Datatable показывает только одну запись

Question

Я получил данные из коллекции пожарного магазина и сохранил их в массиве. Я использовал этот массив для ввода данных в таблицу данных, но таблица данных после загрузки отображает только одну запись, но я выбрал все документы в коллекции 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

Как объяснено в do c, querySnapshot.docChanges()

Возвращает массив изменений документов с момента последнего снимка. Если это первый снимок, все документы будут в списке как добавленные изменения.

Вызывая forEach для этого массива, вы циклически переключаетесь на различные DocumentChange и для каждого изменения вы переопределяете содержимое таблицы данных, указав c DocumentChange. Поэтому ваша таблица имеет только один элемент.

Таким образом, вы должны правильно управлять заполнением данных таблицы, добавляя / заменяя / удаляя только соответствующий DocumentChange, используя Методы массива , такие как push(), splice(), et c. , Что-то вроде следующих строк (не проверено):

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

});