Traversing fields of a document within a Firestore collection using Angular

Question

Traversing fields of a document within a Firestore collection using Angular

Attempts to retrieve the user's photoUrl based on their ID have been unsuccessful. Here is a snapshot of my firestore collection, can someone please guide me on how to access the photoUrl? https://i.stack.imgur.com/p2Zvm.jpg The main collection is 'User', with documents identified by unique IDs containing various fields including the photoUrl that I am trying to access.

getImage(id) { this.users=this.db.collection('user').doc(id).collection('photurl').valueChanges(); console.log(this.users); }

I implemented the above code but encountered a new issue - the function calls itself continuously and the picture does not display as expected.

<div *ngFor="let Question of Questions "> <img src="{{ getImage(Question.authorNo) }}"  class="d-block ui-w-40 rounded-circle" alt="">

This HTML snippet uses an iterator since there are multiple questions. It retrieves the authorID, matches it with the userID, and displays the corresponding photoUrl if a match is found. Below is the function responsible for getting the photoUrl:

getImage(id) { this.db.doc(user/${id}`).valueChanges().subscribe(user => { this.user = user; this.url = this.user.photoUrl; //console.log(this.url);

}); return this.url; }

angular typescript firebase google-cloud-firestore

Answer 1

Answer №1

To subscribe to the user data and set the photoUrl to a variable, you have two options. Option 1 involves using an Observable while Option 2 assigns all user data to a user variable for use in the template.

Option 1

user: any;
photoUrl: string; 

...

ngOnInit(): void {
    this.db.doc(`user/${id}`).valueChanges().subscribe(user => {
        this.user = user;
        this.photoUrl = user.photoUrl;
    });
}

Option 2

user: any; 

...

ngOnInit(): void {
    this.db.doc(`user/${id}`).valueChanges().subscribe(user => this.user = user);
}

Note: The current data model may not facilitate easy retrieval of the photo url. It is suggested to store the photo url directly on the question document similar to how the author id is stored to reduce extra reads. Although Option 3 allows you to achieve your goal, it is not recommended.

Option 3 NOT RECOMMENDED

photoData = [];

...

ngOnInit(): void {
    this.db.collection<any>('user').snapshotChanges().subscribe(snapshots => {
      snapshots.forEach(snapshot => {
        const url = snapshot.payload.doc.data().photoUrl;
        const id = snapshot.payload.doc.id;
        const data = { url, id };
        this.photoData.push(data);
      })
    });
}


getImage(id: string) {
  this.photoData.forEach(item => {
    if (item.id === id) {
      return item.url;
    }
  })
}

Answer 2

To subscribe to the user data and set the photoUrl to a variable, you have two options. Option 1 involves using an Observable while Option 2 assigns all user data to a user variable for use in the template.

Option 1

user: any;
photoUrl: string; 

...

ngOnInit(): void {
    this.db.doc(`user/${id}`).valueChanges().subscribe(user => {
        this.user = user;
        this.photoUrl = user.photoUrl;
    });
}

Option 2

user: any; 

...

ngOnInit(): void {
    this.db.doc(`user/${id}`).valueChanges().subscribe(user => this.user = user);
}

Note: The current data model may not facilitate easy retrieval of the photo url. It is suggested to store the photo url directly on the question document similar to how the author id is stored to reduce extra reads. Although Option 3 allows you to achieve your goal, it is not recommended.

Option 3 NOT RECOMMENDED

photoData = [];

...

ngOnInit(): void {
    this.db.collection<any>('user').snapshotChanges().subscribe(snapshots => {
      snapshots.forEach(snapshot => {
        const url = snapshot.payload.doc.data().photoUrl;
        const id = snapshot.payload.doc.id;
        const data = { url, id };
        this.photoData.push(data);
      })
    });
}


getImage(id: string) {
  this.photoData.forEach(item => {
    if (item.id === id) {
      return item.url;
    }
  })
}

Traversing fields of a document within a Firestore collection using Angular

Answer №1

Similar questions

Using Angular's asterisk wildcard to correctly match nested routes

Developing React component libraries with TypeScript compared to Babel compiler

Getting the current page name within the app.component.ts file in Ionic 3 - a simple guide

Using Angular 2 to bind ngModel to a property's reference

Writing a CSV file to AWS S3 proves to be unsuccessful

What are some ways to streamline inline styling without having to create numerous variables?

typescript page objects in protractor are showing an undefined property

Angular handling multiple query parameters

Encountered error in Angular unit testing: Route matching failed to find a match

Your global Angular CLI version (6.1.2) surpasses that of your local version (1.5.0). Which version of Angular CLI should be used locally?

Executing various angular 4 applications simultaneously using a shared Node.js server for rendering purposes

I am facing difficulty in retrieving data from Firestore using Angular

An error has occurred: module @angular-devkit/build-angular/package.json could not be located

Utilizing Filters (Pipes) in Angular 2 Components without Involving the DOM Filters

Encountering a Typescript error with Next-Auth providers

Transmit information from an Angular application to a Spring Boot server using a POST request

Error: JSON unexpected token ' at position 2 - Solution for fixing this issue

Updating the value of a dynamic ngModel in Ionic3

How to Determine the Requirement Status of Input Variables in an Angular 2 Directive?

Bringing in SCSS using Typescript, React, and Webpack