RXJS Emit first result and then wait for another observable

Tersius

Currently I have two observables. One returns a list of clients and the other is fired when text changes.

I would like to emit the full result of clients and then switch over to the inner observable once the user has started filtering.

I'm also trying to achieve a debounce on the text being typed.

I've put together something that doesn't work to try and explain. As it currently is it only displays clients once I start typing text.

let obs = Observable.fromPromise(this.clientService.getClients())
      .map((clients) => {
        return clients.map((c) => new Client().fromObject(c));
      });

    this.clients = obs.switchMap((values) => {
        return this.searchText.valueChanges
          .debounceTime(400)
          .distinctUntilChanged()
          .map((text) => {
            return values.filter((c) => c.isMatch(text));
          });
      });
n00dl3

You need to merge your observables together :

let obs = Observable.fromPromise(this.clientService.getClients())
      .map((clients) => {
        return clients.map((c) => new Client().fromObject(c));
      }).share();

let filtered = obs.switchMap((values) => {
    return this.searchText.valueChanges
        .debounceTime(400)
        .distinctUntilChanged()
        .map((text) => {
        return values.filter((c) => c.isMatch(text));
        });
    });

this.clients = Observable.merge(obs,filtered);

first you need to use the share operator to avoid fetching clients twice (see edit further). then you need to get the value from obs and also from filtered. this is what merge is made for :

Creates an output Observable which concurrently emits all values from every given input Observable.

Flattens multiple Observables together by blending their values into one Observable.

enter image description here

[source]

Edit : The share part is not necessary in this specific case as the OP is using a promise as observable source, promises not being triggered by the subscription, they are hot observables and do not need to be shared. But if you are dealing with other observable source (like angular Http service's method, you might need to share.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

RxJS wait for observable then create another observable, and so on

RxJava: wait another observable result

Emit action, then request and emit another with redux-observable and rxjs

RxJS - split Observable into two, wait for first to finish

how to wait for an observable but return the previous observable result in rxjs?

How to emit/merge another observable inside RXJS retryWhen

RXJS on first emit

Wait for several rxjs observable inside foreach till finished to execute an another

rxjs: how to return the result from another observable from catchError

Combine subject and observable and wait for subject to emit a value then emit observable

Wait observable inside another observable

Rxjs: Execute code and emit value on completion of Observable

RxJS: Correct way to manually emit an Observable

RxJS Observable: Emit every specific change in the array

Angular how to wait for an http observable to emit

combineLatest doesn't wait for observable to emit value

Zip seems not to wait for Observable to emit data

RxJS (Interval) Observable wait for last observable to complete

How to wait for first Observable to finish before executing others in parallel using RxJS

how to change the data of the first observable using data from another observable including the condition in angular/rxjs

Angular 5, rxjs- wait for observable to finish only if it is in a middle of a run before running another process

RxJS Observable result from an Observable's output

How to chain the result of observable to the below observable in rxjs

Rxjs One Observable Feeding into Another

another rxjs Observable retry strategy

RxJS wait for an observable to complete in its entirety

Rxjs observable wait until some condition is met

Wait for an async operation in onNext of RxJS Observable

Angular/RxJS wait for HTTP response in inner Observable