0
233
VistasGenerate 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:
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:
Maybe the data coming from Firebase needs to be formatted. I don't know.
I will appreciate any help. Thanks!
1 Respuestas
Responde la pregunta0
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]),
});