Search code examples
javascriptgoogle-cloud-firestorejspdfjspdf-autotable

Generate jspdf auto table content from Firestore collection

I already have a report created in jspdf with an autotable in its place. It will be to list some data about a student which source is in a collection in Firestore. I have already made the reference to the collection with:

 const ref = collection (“students”).doc(“selectedStudent”).collection(“grades”)

In that collection there will be an undefined number of documents. Each one of them is an object with a lot of data that I already have in place:

enter image description here

From all that data, I would only use three fields to dynamically fill the table, so my table code would be as:

doc.autoTable({
  head: [['Subject', 'Teacher', 'Achievements']],
  body: [
    ['Subject1', 'Teacher1', 'Lorem ipsum'],
    ['Subject2', 'Teacher2', 'Lorem ipsum'],
    // ...
  ],
})

I know that in order to achieve it I should use a forEach function or loop going through the collection but my knowledge is limited and I don’t know how to get it done. This is what I have tried:

let keys = ['asignatura', 'authorApellidos', 'logros'];
let bodyData = [], i, j, rowData;

    for (i = 0; i < ref.length; i++) {
        rowData = [];
        for (j = 0; j < keys.length; ++j) {
          let key = keys [j];
          rowData.push (ref [i][key]);
        }
        bodyData.push (rowData);
    }

    doc.autoTable({
    head: [['Asignatura', 'Profesor', 'Descripción']],
    startY: 137,
    headStyles: { fillColor: [50, 205, 50] },
    body: bodyData
    })

However I have an empty table where I just see the head but no data.

When I do a console.log(ref) what I can see in the console is:

enter image description here

Maybe the data coming from Firebase needs to be formatted. I don't know.

I will appreciate any help. Thanks!

Solution

  • you can use .map to transform each item in an array into an array with same length and a different format of data

    example:

    doc.autoTable({
  head: [['Subject', 'Teacher', 'Achievements']],
  body: ref.map(object => {
    return [object.subject, object.teacher, object.achievements];
  }),
});

    or destructure the object as follows:

    doc.autoTable({
  head: [["Subject", "Teacher", "Achievements"]],
  body: ref.map(({subject, teacher, achievements}) => { // <-- object destructuration
    return [subject, teacher, achievements];
  }),
});

    since this map function is returning new format directly, you can skip the return and make a one-liner

    doc.autoTable({
  head: [["Subject", "Teacher", "Achievements"]],
  body: ref.map(({subject, teacher, achievements}) => [subject, teacher, achievements]),
});