Accessing values from Firebase in the component in Angular

Question

I have documents of users with first name and last name separated. I need access to them in the component and then merge them so I can save the whole name in another collection. So far I have only found broken or deprecated code from obsolete versions. https://github.com/angular/angularfire2/blob/master/docs/firestore/documents.md And with this code I don't get access in the component. How do I store the values in variables in the component so I can use them?

export interface user {
 first_name: string;
 last_name: string;
}
export class UserComponent {

 userCollection: AngularFirestoreCollection<user>;
 firstname: string;
 lastname: string;

 constructor(private afs: AngularFirestore) {
    this.userCollection.doc(this.user).ref.get().then(function(doc) {
    console.log(doc.data());
    *MISSING CODE*
    console.log(this.firstname, this.lastname);
  }
 }

Which .get or .ref or payload or doc.data() or .pipe do I have to use now to save the data from firebase in those 2 variables "firstname" and "lastname" so I can work with them in the component? I get the whole object in the console, but not each variable separated. It took me 4 days to find out that ".get()" on FirestoreCollections only works when I put a ".ref" in front of it, if anyone could help me to find this information faster, that would be very appreciated.

Then I get the object: Document data: {first_name: "John", last_name: "Doe", …} first_name: "John" last_name: "Doe" proto: Object — Harry Wega
– Harry Wega, Commented Dec 2, 2018 at 4:35

Sajeetharan · Accepted Answer · 2018-12-02 05:40:45Z

1

Since tou are getting the data, you could just assign it as follows,

 constructor(private afs: AngularFirestore) {
    this.userCollection.doc(this.user).ref.get().then(function(doc) {
    this.firstname = doc.data().first_name;
    this.lastname = doc.data().last_name;    
    console.log(this.firstname, this.lastname);
}

answered Dec 2, 2018 at 5:40

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Harry Wega Over a year ago

"Uncaught (in promise): TypeError: Cannot set property 'firstname' of undefined TypeError: Cannot set property 'firstname' of undefined" But it is right below the userCollection.

Collectives™ on Stack Overflow

Accessing values from Firebase in the component in Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related