Why subscribing an Observable returning a list of FireStore document snapshot I can't build a proper list of objects? I obtain undefined objects

Question

I am fighting with AngularFire into an Angular project trying to perform a query on FireStore database that retrieve all the documents in a collection and the related UID.

Basically I have the following situation:

So, as you can see, at the moment I only have a single collection named calendar containing some documents where each document represent an event on a calendar (but this detail is not so important now).

Into my Angular application I have a service class containing this method that simply perform a query to retrieve all the documents inside my calendar collection using the snapshotChanges() method in order to ontain the entire snapshot including the UID and the data :

getEvents(): Observable<any[]> {
    this.items = this.db.collection('calendar').snapshotChanges();

    return this.items;
}

Then into the TypeScript code of a component I subscribe the Observable object returned by the previous method in order to build an object containind the UID and the data. I have done it in this way:

this.eventService.getEvents().subscribe(eventsSnaps => {
  this.events = eventsSnaps.map(currentCourseSnap => {
    console.log("DOCUMENT ID: ", currentCourseSnap.payload.doc.id);
    var currentCourse = {
      id: currentCourseSnap.payload.doc.id,
      ...currentCourseSnap.payload.doc.data
    }
  })
  console.log("EVENTS FROM SNAPS: ", this.events);
});

And here I am obtaining a strange behavior.

The first console.log() print correctly the retrieved UID of all the document obtained from FireStore but the second consle.log() printing the entire array of built object retrieve an array of undefined , in my Chrome console I obtain this output:

EVENTS FROM SNAPS:  (16) [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]

Why it can't correctly build my objects? What is wrong? What am I missing? How can I solve this problem?

Answer 1

When the curly braces are included in an arrow function, the return statement should be stated explicitly. Try the following

this.eventService.getEvents().subscribe(eventsSnaps => {
  this.events = eventsSnaps.map(currentCourseSnap => {
    console.log("DOCUMENT ID: ", currentCourseSnap.payload.doc.id);
    var currentCourse = {
      id: currentCourseSnap.payload.doc.id,
      ...currentCourseSnap.payload.doc.data
    };
    return currentCourse;      // <-- return the object here
  });
  console.log("EVENTS FROM SNAPS: ", this.events);
});

---

this.eventService.getEvents().subscribe(eventsSnaps => {
  this.events = eventsSnaps.map(currentCourseSnap => ({
    id: currentCourseSnap.payload.doc.id,
    ...currentCourseSnap.payload.doc.data
  }));
  console.log("EVENTS FROM SNAPS: ", this.events);
});

The above is similar to writing

this.eventService.getEvents().subscribe(eventsSnaps => {
  this.events = eventsSnaps.map(currentCourseSnap => {
      return {
        id: currentCourseSnap.payload.doc.id,
        ...currentCourseSnap.payload.doc.data
      }
    }
  });
  console.log("EVENTS FROM SNAPS: ", this.events);
});