CODEWITHSUNDEEP
angulartypescriptfirebasegoogle-cloud-firestoreangularfire2
user14645785
user14645785

Reputation:

get data with angular firestore

I am new to angular firestore and I'm trying to get data from firestore. I have the following code:

import { AngularFirestore } from '@angular/fire/firestore';

export class ProfileComponent implements OnInit {
    myArray: any[] = []
    constructor(private authService: AuthService, public afs: AngularFirestore) {}

    test = this.afs.collection('doctors').get().subscribe((ss) => {
        ss.docs.forEach((doc) => {this.myArray.push(doc.data()); });
    });
}

In my html file, I'm trying to display myArray like this:

<li *ngFor='let doc of myArray'>
     {{doc}}
</li>

I know that my array reads the table 'doctors' correctly in my firebase since it prints three object which is the number of element in my table doctors right now, but I get the following output in html:

enter image description here

Could someone help me to display the values correctly? Table doctors have an email, firstname and lastname. I would like to print email of each entity.

Upvotes: 1

Views: 85

Answers (1)

Yair Cohen
Yair Cohen

Reputation: 2268

You need to display the data using the json pipe, like this:

<li *ngFor='let doc of myArray'>
     {{doc | json}}
</li>

The json pipe is necessary when you want to display an object and it's mostly useful for debugging. More info in the docs: Angular - JsonPipe

Upvotes: 1

Related Questions