Mapping nested array of references in Angular Firestore

Question

Mapping nested array of references in Angular Firestore

I am working with a collection called A, which contains documents that reference other documents in collection B.

https://i.sstatic.net/C1HtT.png

When fetching my A documents from the service, I receive an array of objects that are not usable. However, I want to be able to view them as well.

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

https://i.sstatic.net/O6suh.png

It is crucial for me to retrieve an array of A objects with arrays of B objects inside, rather than having two separate arrays for A and B.

I hope I have communicated my needs clearly. Thanks in advance

arrays angular typescript google-cloud-firestore

Answer 1

Answer №1

Explained in the documentation for Firestore found here, a document reference in Firestore points to a specific location within the database where a document is stored. This reference can be used to interact with the document by reading, writing, or monitoring changes. It's important to note that the reference itself does not contain the actual document data, requiring a separate query to fetch it.

To retrieve the document data associated with each reference in the `array_of_bs`, you will need to iterate through each reference, fetch the corresponding document using its path, and store the data in a temporary array. Then, merge this data with the results obtained from the `map()` function as demonstrated below:

async getAs() {
   this.aService.getAs().subscribe(async (data) => {
     const promises = await data.map(async (e) => {

       // temporary array to store document data for b
       let array_of_bs = [];

       // iterate 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 // replacing previous array_of_bs with fetched document data
       } as A;
     });

     const docValues = await Promise.all(promises);

     console.log(docValues);
   });
 }

Answer 2

Explained in the documentation for Firestore found here, a document reference in Firestore points to a specific location within the database where a document is stored. This reference can be used to interact with the document by reading, writing, or monitoring changes. It's important to note that the reference itself does not contain the actual document data, requiring a separate query to fetch it.

To retrieve the document data associated with each reference in the `array_of_bs`, you will need to iterate through each reference, fetch the corresponding document using its path, and store the data in a temporary array. Then, merge this data with the results obtained from the `map()` function as demonstrated below:

async getAs() {
   this.aService.getAs().subscribe(async (data) => {
     const promises = await data.map(async (e) => {

       // temporary array to store document data for b
       let array_of_bs = [];

       // iterate 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 // replacing previous array_of_bs with fetched document data
       } as A;
     });

     const docValues = await Promise.all(promises);

     console.log(docValues);
   });
 }

Mapping nested array of references in Angular Firestore

Answer №1

Similar questions

A guide to accessing a property value in Angular 6 from an object using a string key

Is it possible to utilize filter in place of forEach in Javascript?

What is the most straightforward method for summing all elements in a 2D array based on their position in Ruby?

typescript decorator implemented on a class that is nested within another class

Using Angular 2 to implement a custom dropdown feature with the ngModel directive

Download and store the response body using FileSaver and blob technology

Chrome does not trigger the mouseenter event for disabled elements

What is the method for generating a binary numpy array with two columns from a list of strings?

Is the Cyrillic encoding feature not functioning properly in Angular 4 with .Net Core 2?

What specific type should be used for validations when incorporating express-validator imperative validations?

Saving user information in a MongoDB database with Node.js using a POST request

Using Angular to populate textboxes with SQL data

Manipulating Website Content with jQuery Flexibility

Is it possible to maintain the scroll position of a PrimeNG table when updating the data?

The data in the Angular variable is not persisting

Retrieve items from an array using indexes provided by a separate reference table

Unable to locate the necessary file. - Implementing TypeScript in a React application

Configuring Spring Boot with Security to enable secure communication with an Angular web application

Injecting shared libraries in a NestJs monorepo system

Combining arrays within cells in excel