Angular Firestore - Map data from nested array of references - arrays

Question

I have a collection A and those documents have an array of references to documents in collection B.
In my service I get all my A's but with an array of unusable objects. I but I want to view them too.
getAs() {
this.aService.getAs().subscribe((data) => {
this.aArray = data.map((e) => {
return {
id: e.payload.doc.id,
...(e.payload.doc.data() as {}),
} as A;
});
//TODO some magic to get a nice array of B's inside every A
});
}
It's important to get the array of A objects with arrays of B object inside and not two separate arrays of A's and B's.
I hope I have expressed myself clearly to some extent.
Thanks in advance

Answer 1

As outlined in the Firestore documentation here Firestore Reference a document reference refers to a document location within Firestore and can be used to read, write, or listen to said document. This means that the reference type does not store the document data, and therefore you must query for it.
What you'll have to do is loop over each reference in array_of_bs and use its path to query for the corresponding document. Then, add the document data to a temporary array and combine it with the array being returned by the map() function like so:
async getAs() {
this.aService.getAs().subscribe(async (data) => {
const promises = await data.map(async (e) => {
// temp array to hold b document data
let array_of_bs = [];
// loop over each reference in array_of_bs
for (const path of (e.payload.doc.data() as any).array_of_bs) {
const bObj = await this.afs.doc(path).get().toPromise();
array_of_bs.push(bObj.data());
}
return {
id: e.payload.doc.id,
...(e.payload.doc.data() as {}),
array_of_bs: array_of_bs // this will overwrite the array_of_bs returned in the above line with the document data
} as A;
});
const docValues = await Promise.all(promises);
console.log(docValues);
});
}