Angular RX/JS Nested Observable calls

Question

I have problems wrapping my head around how to achieve the following Problem with Reactive programming:

I want to call a Method getSearchResults(searchterm: string): Observable<Foo[]>. In this method I normally filter data from a locally stored dataset. Only if this dataset is not loaded, I want to load my dataset from the server first:

getSearchResults(searchterm: string): Observable<Foo[]> {
  if(this.dataset != null) {
    return this.filter(this.dataset, searchterm);
  }

  // Load dataset first from server. service method returns an Observable
  const obs = myService.loadDataset();
  obs.subscribe(data => {
     this.dataset = data;

     // Now I want to call filter and return an Observable
     return this.filter(this.dataset, searchterm);
  });

}

Consider this as pseudocode and no full example, but I hope it makes my problem clear. I understand, that this does not work in this manner.

But I really have a hard time to find a pattern to achieve something like this.

Any help?

Chatar Singh · Accepted Answer · 2018-06-21 10:53:29Z

1

Include rxjs observable import { Observable } from 'rxjs/Observable';

And then create your own observable.

    return Observable.create(observer => {
      const obs = myService.loadDataset();
      obs.subscribe(data => {
         this.dataset = data;

         // Now I want to call filter and return an Observable
         observer.next(this.filter(this.dataset, searchterm));
      });
   });

answered Jun 21, 2018 at 10:53

Chatar Singh

1,06311 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tarator Over a year ago

This is exactly what I was looking for five hours now! Thank you very much!

udalmik Over a year ago

it triggers myService.loadDataset() on each subscription for result observable, isn't it?

Tarator Over a year ago

yes, it does, but for that i check with an if if data is already loaded... Meaning: I only create this Observable if the data hasn't been loaded already...)

udalmik Over a year ago

hm, okay. other issue there - you loose complete/error which can be emitted by data set observable. as you delegate only observer.next invocation in subscribe

zhimin · Accepted Answer · 2018-06-21 11:03:31Z

0

I think you can convert observable to promise, like this:

async getSearchResults(searchterm: string): Promise<Foo[]> {
    if(this.dataset != null) {
        return await this.filter(this.dataset, searchterm). toPromise();
    }

    // Load dataset first from server. service method returns an Observable
    const data = await myService.loadDataset().toPromise();
 // Now I want to call filter and return an Observable
   return await this.filter(this.dataset, searchterm). toPromise ();
}

answered Jun 21, 2018 at 11:03

zhimin

3,05017 silver badges24 bronze badges

Comments

siva636 · Accepted Answer · 2018-06-21 11:12:16Z

0

The following logic is simple and straightforward to achieve the goal:

localDataLoaded = false;

yourLocalDataAsObservable.pipe(
filter()
).subscribe(
data => {this.localDataLoaded = true;},
error => {},
() => {if (!localDataLoaded) {
// Load data from server, because the data you need is not in the local store
}}

)

answered Jun 21, 2018 at 11:12

siva636

16.5k25 gold badges103 silver badges136 bronze badges

Collectives™ on Stack Overflow

Angular RX/JS Nested Observable calls

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related