Datatable only shows one entry

Datatable only shows one entry

jay123jay123 Posts: 3Questions: 1Answers: 0

I am building a web app with firestore as its database. Currently, I am retrieving all documents from a collection then injecting those documents into a datatable using an array. The problem is, only one document is shown and the collection has 10 documents within it. What could be the problem? Below is the code:

html:![](https://datatables.net/forums/uploads/editor/mj/o83ctkt7bqwy.png "")
![](https://datatables.net/forums/uploads/editor/l2/eolop8dcsc5n.png "")


  <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>

      <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>


javascript: db.collection("Emergency_Feeds").orderBy("timestamp","desc").get().then(function(querySnapshot) { querySnapshot.forEach(function(doc) { // doc.data() is never undefined for query doc snapshots console.log(doc.id, " => ", doc.data()); var documentId = doc.id; var username = doc.data().name; var emTitle = doc.data().title; var emDets = doc.data().details; var emTimeDate = doc.data().timestamp.toDate(); tableData =[ [ documentId, emTitle, emDets, emTimeDate, username ] ] console.log('Data:'+tableData); $('#mydatatable').DataTable( { retrieve: true, data:tableData } ); }); });

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,343Questions: 26Answers: 4,954
    edited February 2020 Answer ✓

    You need to initialize your array before the loop then use push() to add the new records to the array. You also need to move the Datatables initialization outside of the loop so it executes only once. Something like this:


    var tableData = []; db.collection("Emergency_Feeds").orderBy("timestamp","desc").get().then(function(querySnapshot) { querySnapshot.forEach(function(doc) { // doc.data() is never undefined for query doc snapshots console.log(doc.id, " => ", doc.data()); var documentId = doc.id; var username = doc.data().name; var emTitle = doc.data().title; var emDets = doc.data().details; var emTimeDate = doc.data().timestamp.toDate(); tableData.push( [ documentId, emTitle, emDets, emTimeDate, username ] ); console.log('Data:'+tableData); }); }); $('#mydatatable').DataTable( { retrieve: true, data:tableData } );

    Didn't test it so there may be errors but should give you an idea of what to do.

    Kevin

  • jay123jay123 Posts: 3Questions: 1Answers: 0

    solved the issue , thank you

  • maramedinanmaramedinan Posts: 2Questions: 0Answers: 0

    Hello, can Anyone help me addapt mine? I am completely rookie, have tried to search for documentation but I can't seem to find... So I need practical help

    Thanks in advance

  • maramedinanmaramedinan Posts: 2Questions: 0Answers: 0
    edited May 2020

    // Initialize Cloud Firestore through Firebase firebase.initializeApp({ apiKey: "", authDomain: "", projectId: "", }); var db = firebase.firestore(); //Agregar documentos function guardar(){ var cliente = document.getElementById('cliente').value; var fecha = document.getElementById('fecha').value; var foto = document.getElementById('foto').value; var importe = document.getElementById('importe').value; var observacion = document.getElementById('observacion').value; var tipo = document.getElementById('tipo').value; db.collection("ctacte").add({ cliente: cliente, fecha: fecha, foto: foto, importe: importe, observacion: observacion, tipo: tipo }) .then(function(docRef) { console.log("Document written with ID: ", docRef.id); document.getElementById('cliente').value = ''; document.getElementById('fecha').value = ''; document.getElementById('foto').value = ''; document.getElementById('importe').value = ''; document.getElementById('observacion').value = ''; document.getElementById('tipo').value = ''; }) .catch(function(error) { console.error("Error adding document: ", error); }); } //leer documento var tabla = document.getElementById('tabla'); db.collection("ctacte").onSnapshot((querySnapshot) => { tabla.innerHTML = ''; querySnapshot.forEach((doc) => { console.log(`${doc.id} => ${doc.data().fecha}`); tabla.innerHTML += ` <tr> <th scope="row">${doc.id}</th> <td>${doc.data().cliente}</td> <td>${doc.data().fecha}</td> <td>${doc.data().foto}</td> <td>${doc.data().importe}</td> <td>${doc.data().observacion}</td> <td>${doc.data().tipo}</td> <td><button class= "btn btn-danger" onclick="eliminar('${doc.id}')">Eliminar</button></td> <td><button class= "btn btn-warning"onclick="editar('${doc.id}','${doc.data().cliente}','${doc.data().fecha}','${doc.data().foto}','${doc.data().importe}','${doc.data().observacion}','${doc.data().tipo}')">Editar</button></td> </tr> ` }); }); //borrar documento function eliminar(id){ db.collection("ctacte").doc(id).delete().then(function() { console.log("Document successfully deleted!"); }).catch(function(error) { console.error("Error removing document: ", error); }); } //editar documento function editar(id,cliente,fecha,foto,importe,observacion,tipo){ document.getElementById('cliente').value = cliente; document.getElementById('fecha').value = fecha; document.getElementById('foto').value = foto; document.getElementById('importe').value = importe; document.getElementById('observacion').value = observacion; document.getElementById('tipo').value = tipo; var boton = document.getElementById('boton'); boton.innerHTML = 'Editar'; boton.onclick = function(){ var washingtonRef = db.collection("ctacte").doc(id); var cliente = document.getElementById('cliente').value var fecha = document.getElementById('fecha').value var foto = document.getElementById('foto').value var importe = document.getElementById('importe').value var observacion = document.getElementById('observacion').value var tipo = document.getElementById('tipo').value return washingtonRef.update({ cliente: cliente, fecha: fecha, foto: foto, importe: importe, observacion: observacion, tipo: tipo }) .then(function() { console.log("Document successfully updated!"); boton.innerHTML = 'Guardar'; document.getElementById('cliente').value = ''; document.getElementById('fecha').value = ''; document.getElementById('foto').value = ''; document.getElementById('importe').value = ''; document.getElementById('observacion').value = ''; document.getElementById('tipo').value = ''; }) .catch(function(error) { console.error("Error updating document: ", error); }); } }

    Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    @maramedinan We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

This discussion has been closed.