Question 177242 in Firebase Question posted in
An extensive official documentation can be found here.

Can Observable subscriptions in Angular be combined using Firebase?

(1) I have a request in Firebase firestore where I get several ‘nomBu’ strings from a collection. OK

(2) Then, with these recovered ‘nomBu’ strings, I make a second request to get metedata from another collection where the ‘nomBu’ is present. OK

(3) I would like to display data in a dashboard in HTML. OK But I can only get 1 observable result in my dashboard (the last one executed)

My code (1 and 2 and 3)

demandesSaaSEvaluator: Demande[];

fire.collection('businessUnit')
.where('evaluators', 'array-contains', this.auth.currentUserEmail).get() //(1)
          .then(snapshot => {
            snapshot.forEach(doc => {
//for each matching 'nomBu' get his metadata
this.service.getEvaluatorSaaSRequests(doc.data().nomBu).subscribe(actionArray => { //(2)
              this.demandesSaaSEvaluator = actionArray.map(item => {
            
                return { //display in HTML (3)
                  id: item.payload.doc.id,
                  ...(item.payload.doc.data() as object)
                } as Demande;
              
              });
            });
            });
           });

My code (2)

getEvaluatorSaaSRequests(nomBu) { //should be executed several time
    return this.firestore
      .collection('solutions', ref => 
        ref.where('businessUnitOfSolution', '==', nomBu).where('type', '==', 'SaaS')
      )
      .snapshotChanges();
  }

My code (3)

<tbody>
    <tr *ngFor="let demande of demandesSaaSEvaluator; let i = index">
      <td>{{ demande.id }}</td>
      <td>{{ demande.solutionName }}</td>
      <td>{{ demande.nomBu }}</td>
      <td>{{ demande.user }}</td>
    </tr>
</tbody>

With code above I can only display/get one observable result (the last one executed) => I would like to combine all observable subscription results to display the dashboard with all executed request results.

Workaround:

demandesSaaSEvaluator: Demande[]: [];

this.service.getEvaluatorSaaSRequests(doc.data().nomBu).subscribe(actionArray => {               
  this.demandesSaaSEvaluator.push(...actionArray.map(item => {
    return {
      id: item.payload.doc.id,
      ...(item.payload.doc.data() as object)
    } as Demande;      
  }));
});

However with my workaround I get good results from my Observable (multiple observable subsciptions in my dashboard) but twice. How can I avoid that ?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I finally solved the issue just with take(1):

    getEvaluatorSaaSRequests(nomBu) { //should be executed several time
  return this.firestore.collection(
    'solutions', ref => ref.where(
      'businessUnitOfSolution', '==', nomBu
    ).where('type', '==', 'SaaS')).snapshotChanges().pipe(
      take(1)
    );
}

  2. 0

    Try shareReplay to avoid double

    getEvaluatorSaaSRequests(nomBu) { //should be executed several time
  return this.firestore.collection(
    'solutions', ref => ref.where(
      'businessUnitOfSolution', '==', nomBu
    ).where('type', '==', 'SaaS')).snapshotChanges().pipe(
      shareReplay(1)
    );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search