CODEWITHSUNDEEP
angularfirebaserxjsobservablegoogle-places-api
Kyle Abens
Kyle Abens

Reputation: 273

Angular add Observable result inside Map

I currently have a method in my service that retrieves a collection from Firebase (Firestore) and returns it as an observable.

getInstallers(): Observable<any[]> {
    const installersCollection = this.afs.collection<Installer>('installers');
    return installersCollection.snapshotChanges().map(installers => {
      return installers.map(i => {
        const data = i.payload.doc.data() as Installer;
        const id = i.payload.doc.id;
        return { id, ...data };
      });
    });
  }

I have another method which utilizes google places api and returns an observable of a place when place_id is passed to it. I'm not going to include all of it because it's kind of long just know that it returns an observable of a google place object.

getPlaceDetails(placeId): Observable<any>

What I'm trying to do is something like this...

getInstallers(): Observable<any[]> {
    const installersCollection = this.afs.collection<Installer>('installers');
    return installersCollection.snapshotChanges().map(installers => {
      return installers.map(i => {
        const data = i.payload.doc.data() as Installer;
        const id = i.payload.doc.id;
        this.getPlaceDetails(data.placeId).subscribe(place => {
          return { id, ...data, ...place }
        });
      });
    });
  }

However this causes the method to return void. I'm trying to figure out a way to add the data I receive from my getPlaceDetails observable to the data that is mapped coming from my firebase collection. Thanks!

Upvotes: 0

Views: 379

Answers (1)

Oleksandr Poshtaruk
Oleksandr Poshtaruk

Reputation: 2146

Use swtchMap

getInstallers() : Observable<any[]> {
     const installersCollection = this.afs.collection<Installer>  ('installers');
     return installersCollection.snapshotChanges().switchMap(installers => {
        let arrayOfObservables = installers.map(i => {
         const data = i.payload.doc.data() as Installer;
         const id = i.payload.doc.id;
         return this.getPlaceDetails(data.placeId).map(place => {
            return { id, ...data, ...place }
         });
        });
        return Observable.forkJoin(arrayOfObservables);
     });
   }

And in some oyher place call it:

 this.getInstallers().subscribe(data => {
   // here we have resukt
 })

Upvotes: 1

Related Questions