Ionic Firebase undefined value on firebase data

Issue

Im working on my first Ionic + Firebase project, and im not understanding this:

Im searching and getting an object from firebase, I can access its details on html and show it to the user.

But now I need to save the createdBy field on that object so I can use it to search for its creator on firebase.

But when I try to access that info its always undefined. Why is that? Any tips on how to fix this?

export class VisitDetailsPage implements OnInit {

public trips: Observable<HomeTripCardsModel>;
public trip: HomeTripCardsModel;
public buddyInfo;
public targetBuddyId: any;


constructor(private router: Router, private navCtrl: NavController,
            public fireStorageService: FireStorageService,
            private route: ActivatedRoute, public db: AngularFirestore) {
}

ngOnInit() {
    const tripId: string = this.route.snapshot.paramMap.get('id');

    this.db.collection('users').get()
        .subscribe(querySnapshot => {
            querySnapshot.forEach(doc => {
                this.trips = this.fireStorageService.getTripDetail(tripId, doc.id);
                this.trips.forEach((element: HomeTripCardsModel) => {
                    if (element?.id === tripId) {
                        this.trip = element;
                        this.targetBuddyId = element.createdBy;
                    }
                });

            });
        });

    // buddy
    console.log(this.trip?.createdBy); // returns undefined
    console.log('saved ', this.targetBuddyId) // returns undefined

}}

Solution

Data is loaded from Firebase asynchronously. If you set some breakpoints and run in the debugger, or add a log inside the subscribe method, you'll see that your console.log(this.trip?.createdBy) runs before this.trip = element has ever been run. So at that point, it indeed doesn't have a value yet.

For this reason, all code that needs data from the database, needs ot be inside the subscribe callback:

this.db.collection('users').get()
    .subscribe(querySnapshot => {
        querySnapshot.forEach(doc => {
            this.trips = this.fireStorageService.getTripDetail(tripId, doc.id);
            this.trips.forEach((element: HomeTripCardsModel) => {
                if (element?.id === tripId) {
                    this.trip = element;
                    this.targetBuddyId = element.createdBy;
                }
            });
            // buddy
            console.log(this.trip?.createdBy); // returns undefined
            console.log('saved ', this.targetBuddyId) // returns undefined
        });
    });

Answered By - Frank van Puffelen