Datatable only shows one entry

jay123 · February 2020

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

kthorngren · February 2020

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

jay123 · February 2020

solved the issue , thank you

maramedinan · May 2020

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

maramedinan · 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.

colin · May 2020

@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

Datatable only shows one entry

Datatable only shows one entry

Answers

Howdy, Stranger!

Categories

DataTables

Datatable only shows one entry

Datatable only shows one entry

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables