Combine 4 angularfire2 observables into 1

1
votes

This is my new app.

DB

Angular fire 2 + Firebase

getErros(start, end): FirebaseListObservable<any>{

      this.lista = this.db.list('/erros/geral',{
          query: {
                  orderByChild: 'titulo',
                  limitToFirst:10,
                  startAt: start,
                  endAt: end
          }
      });

      this.lista2 = this.db.list('/erros/utilsst',{
          query: {
                  orderByChild: 'titulo',
                  limitToFirst:10,
                  startAt: start,
                  endAt: end
          }
      });

      this.lista3 = this.db.list('/erros/utilfac',{
          query: {
                  orderByChild: 'titulo',
                  limitToFirst:10,
                  startAt: start,
                  endAt: end
          }
      });

      this.lista4 = this.db.list('/erros/geral',{
          query: {
                  orderByChild: 'titulo',
                  limitToFirst:10,
                  startAt: start,
                  endAt: end
          }
      });

      this.listafinal = (this.lista && this.lista2 && this.lista3 && this.lista4);

      return this.listafinal;
  }

Simple Data Search from firebase but can't get it working. Is there any way to perform this ?

Can't get it working. Only receives data from this.lista4

2
angularfirebasefirebase-realtime-databaseangularfire2
what do you want achive here "this.listafinal = (this.lista && this.lista2 && this.lista3 && this.lista4)" – CharanRoot
Get data from 4 different paths. Then send it all to one place – Diogo Alexandre
you want combine four observable into single observable ? – CharanRoot
If you take a look to the DB, there's 4 different paths. And I want to go through all. So yes, I want to combine 4 observables into one i guess.... – Diogo Alexandre
Your going to run into an asynchronous issue; if there are 10,000 nodes returned in /geral and 3 nodes in /utilfac it's going to take longer to get the results from /geral. Therefore 'combining' the nodes before all of the data is returned will be a problem. You need to allow Firebase to return the data before working with it. – Jay

2 Answers

1
votes

I would recommend using combineLatest. using this operator you can combine all four into single observable and this will generate a new value if any one of observable is changed

Observable.combineLatest(
  this.db.list('/erros/geral',{
          query: {
                  orderByChild: 'titulo',
                  limitToFirst:10,
                  startAt: start,
                  endAt: end
          }
      }),
  this.db.list('/erros/utilsst',{
          query: {
                  orderByChild: 'titulo',
                  limitToFirst:10,
                  startAt: start,
                  endAt: end
          }
      }),
  this.db.list('/erros/utilfac',{
          query: {
                  orderByChild: 'titulo',
                  limitToFirst:10,
                  startAt: start,
                  endAt: end
          }
      }),
      this.db.list('/erros/utilatas',{
          query: {
                  orderByChild: 'titulo',
                  limitToFirst:10,
                  startAt: start,
                  endAt: end
          }
      })

)
.map(([geral, utilsst, utilfac, utilatas]: [any, any, any, any]) =>
  ({ geral, utilsst, utilfac, utilatas }) // Do add operation here.
)
0
votes

I've done some changes on the code. 

import { Injectable } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
import { Observable } from 'rxjs/Rx';
import * as Rx from 'rxjs';
@Injectable()
export class ProcurarService {







  constructor(private db: AngularFireDatabase) {
      
   }
  
   hey;
   

  getErros(start, end): FirebaseListObservable<any>{

this.hey = Observable.combineLatest(
  this.db.list('/erros/geral',{
          query: {
                  orderByChild: 'titulo',
                  limitToFirst:10,
                  startAt: start,
                  endAt: end
          }
      }),
  this.db.list('/erros/utilsst',{
          query: {
                  orderByChild: 'titulo',
                  limitToFirst:10,
                  startAt: start,
                  endAt: end
          }
      }),
  this.db.list('/erros/utilfac',{
          query: {
                  orderByChild: 'titulo',
                  limitToFirst:10,
                  startAt: start,
                  endAt: end
          }
      }),
      this.db.list('/erros/utilatas',{
          query: {
                  orderByChild: 'titulo',
                  limitToFirst:10,
                  startAt: start,
                  endAt: end
          }
      })

)
.map(([geral, utilsst, utilfac, utilatas]: [any, any, any, any]) => { let erro = [geral, utilsst,utilfac,utilatas]; console.log(erro); return erro;  } )

return this.hey;

  }


}

This way works, enter image description here

The problem is: enter image description here

That it doesn't displays the data, and i the searchbar isn't working either..