Returning Observable Metadata Instead of Expected Objects on nested snapshotchanges maps

Issue

I'm trying to resolve a user ID to a displayname and add it to a service return. It seems like it's working through console.log, but the actual return in the calling TS file returns observable nonsense.

Service 1

getEventList(pid: string, sid: string) {

return this.afs.collection(this.partyCollectionPath + pid + this.sessionCollectionPath + sid + this.eventCollectionPath, ref => ref.orderBy('timestamp', 'desc')).snapshotChanges().pipe(
  map(actions => {
    return actions.map(a => {
      const data = a.payload.doc.data({ serverTimestamps: 'estimate' }) as events_list;
      const id = a.payload.doc.id;

      return this.authservice.getDisplayName(data.uid).subscribe((doc) => {
        const user = doc.payload.data() as User
        console.log('data', { id, ...data, user: { ...user } })
        return { id, ...data, user: { ...user } };
      })
    })}
  ))
}

Service 2

 getDisplayName(uid: string){
    const userRef: AngularFirestoreDocument<any> = this.afs.doc("users/"+uid)
    return userRef.snapshotChanges()
  }

Calling TS File

this.eventsService.getEventList(this.pid, this.sid).subscribe((eventData) => {
  this.eventData = eventData
  console.log('eventData', eventData);
})

The console.log inside of Service 1 shows me the exact object I want to return, however the actual TS file where it's called gives me an array of objects that look like this, instead of the actual objects.

closed: false
destination: Ne {partialObserver: {…}}
initialTeardown: undefined
isStopped: false
_finalizers: [k]
_parentage: null

If I run the function like this, it works perfectly fine. I'm guessing it has to do with me using subscribe on the second document instead of snapshotChanges, mixing the subscribe and snapshot probably doesn't work I'm just stuck on how to go forward.

  getEventList(pid: string, sid: string) {

    return this.afs.collection(this.partyCollectionPath + pid + this.sessionCollectionPath + sid + this.eventCollectionPath, ref => ref.orderBy('timestamp', 'desc')).snapshotChanges().pipe(
      map(actions => {
        return actions.map(a => {
          const data = a.payload.doc.data({ serverTimestamps: 'estimate' }) as events_list;
          const id = a.payload.doc.id;
return { id, ...data}
          // return this.authservice.getDisplayName(data.uid).subscribe((doc) => {
          //   const user = doc.payload.data() as User
          //   console.log('data', { id, ...data, user: { ...user } })
          //   return { id, ...data, user: { ...user } };
          // })
        })}
      ))
  }

This didn't work at all, it doesn't even get to the console.log inside the second map.

 getEventList(pid: string, sid: string) {

    return this.afs.collection(this.partyCollectionPath + pid + this.sessionCollectionPath + sid + this.eventCollectionPath, ref => ref.orderBy('timestamp', 'desc')).snapshotChanges().pipe(
      map(actions => {
        return actions.map(a => {
          const data = a.payload.doc.data({ serverTimestamps: 'estimate' }) as events_list;
          const id = a.payload.doc.id;
          return this.afs.doc("users/" + data.uid).snapshotChanges().pipe(
            map(userData => {
              let user = userData.payload.data() as User
              console.log('data', { id, ...data, user: { ...user } })
              return { id, ...data, user: { ...user } };
            })
          )
        })
      }
      ))
  }

Solution

I was so close, just needed to use the mergemap properly on 2 snapshotChanges to get what I needed:

  getEventList(pid: string, sid: string) {

    return this.afs.collection(this.partyCollectionPath + pid + this.sessionCollectionPath + sid + this.eventCollectionPath,
      ref => ref.orderBy('timestamp', 'desc')).snapshotChanges().pipe(
        map(actions => {
          return actions.map(a => {
            const data = a.payload.doc.data({ serverTimestamps: 'estimate' }) as events_list;
            const id = a.payload.doc.id;

            return this.afs.doc("users/" + data.uid).snapshotChanges().pipe(map(a => {
             const useData = a.payload.data() as User
             return { id, ...data, user: { ...useData}}
            }))
          })

        }
        ),
        mergeMap(obs => combineLatest(obs))
      )
  }

Answered By - Rusty Shackleford