CODEWITHSUNDEEP
angularangular-materialobservablerxjs6
jg80
jg80

Reputation: 201

mat-table does not render my Observable<any[]> when using mergeMap

Posted nice example on stackBlitz :-)

https://stackblitz.com/edit/angular-f351cx

I am having some troubles combining two database lookups in firebase into a single observable that renders nicely into my mat-table.

I made it pretty far. I can get ONE database lookup to display in a table by just returning the observable, but once I try to connect the second, nothing shows in the table.

I find this very strange, cause when I async/JSON pipe the result of my second Observable the result seems to have the right format.

What am I doing wrong? My example uses http.get() and restcountries.eu, but I am actually trying to make it work with Firebase. The error/behaviour is the same though, both at my own application and in this example.

Upvotes: 2

Views: 99

Answers (1)

Engam
Engam

Reputation: 1061

Looks like when you call return of(myArray) the observable finishes before you get the value from the second http request.

If you add .pipe(delay(100)); to it, the value in the table is shown.

Code will then be:

this.singleObsDataSource = this.http.get('https://restcountries.eu/rest/v2/regionalbloc/efta')
this.doubleObsDataSource = this.singleObsDataSource.pipe(mergeMap((data: any[]) => {
  let myArray = [];
  data.forEach(country => {
    let url = 'https://restcountries.eu/rest/v2/name/' + country['name'];
    this.http.get(url).subscribe(countryInfo=>{
      myArray.push(countryInfo[0]);
    })
  })
  return of(myArray).pipe(delay(100));
}))

Working stackblitz

Upvotes: 1

Related Questions