I'm getting duplicate firestore data array using DataTables plugin

Question

I'm using the DataTable plugin, populating the table with data from Firebase Firestore database. But I'm getting multiple data-set arrays

which continues till it reaches the length of data in the db.

Also, getting some errors

DataTables warning: table id=dataTable - Requested unknown parameter '5' for row 0, column 5. For more information about this error, please see http://datatables.net/tn/4

and

DataTables warning: table id=dataTable - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

But after I skip through all the errors, I get the Firestore data in the table.

Here is the code I'm using to get the data from Firestore and populating in the table;

$(document).ready(function () {
    var dataSet = new Array();
    var query = db.collection('news').orderBy('timestamp');
    let observer = query.onSnapshot(snapshot => {

        let changes = snapshot.docChanges();
        changes.forEach(change => {
            if (change.type == 'added') {
                dataSet.push([change.doc.data().newsTitle,
                change.doc.data().newsContent,
                change.doc.data().newsImage,
                change.doc.data().newsPublisher,
                change.doc.data().timestamp.toDate()]);
                console.log("data", dataSet);

                const dataTable = $('#dataTable').DataTable({
                    data: dataSet,
                    order: [0, 'desc'],
                    columns: [
                        { title: 'Title' },
                        { title: 'Content' },
                        { title: 'Picture' },
                        { title: 'Publisher' },
                        { title: 'Date' },
                        { title: 'Action' }
                    ]
                });
                dataTable.clear();
                dataTable.rows.add(dataSet);
                dataTable.draw();

            }
        })
    });
})

What can I do to resolve this?

Oye Oye · Accepted Answer · 2020-05-20T09:53:31

Figured it out, just removed the dataTable.rows.add(dataSet) from the loop.

$(document).ready(function () {
    var dataSet = new Array();
    var query = db.collection('news').orderBy('timestamp');
    let observer = query.onSnapshot(snapshot => {

        let changes = snapshot.docChanges();
        changes.forEach(change => {
            if (change.type == 'added') {
                dataSet.push([change.doc.data().newsTitle,
                change.doc.data().newsContent,
                change.doc.data().newsImage,
                change.doc.data().newsPublisher,
                change.doc.data().timestamp.toDate()]);
            }
        })
        console.log("data", dataSet);

        const dataTable = $('#dataTable').DataTable({
            data: dataSet,
            order: [0, 'desc'],
            columns: [
                { title: 'Title' },
                { title: 'Content' },
                { title: 'Picture' },
                { title: 'Publisher' },
                { title: 'Date' },
                { title: 'Action' }
            ]
        });
        dataTable.clear();
        dataTable.rows.add(dataSet);
        dataTable.draw();
    });


})

But I'm still getting the alert error below twice, any ideas?

DataTables warning: table id=dataTable - Requested unknown parameter '5' for row 0, column 5. For more information about this error, please see http://datatables.net/tn/4

I'm getting duplicate firestore data array using DataTables plugin

1 Answers