RxJs Observable: Execute function if empty/filtered

Question

I've got an Observable that listens to some user input from a text box. If the observed string's length is >=3 (filter), it executes some HTTP call (switchMap).

Now I'd like to detect somehow if the user input has been filtered. Reason:

If the HTTP call has been done, it should show the results.
If the user input got filtered (== is invalid), it should clear the results.

Here's the code I'd like to have (see: ifFiltered):

this.userInput.valueChanges
    .filter(val => val && val.length >= 3)
    .ifFiltered(() => this.results = [])
    .switchMap(val => getDataViaHTTP())
    .subscribe(val => this.results = val);

I know, I could place that logic within the filter function for this simple example. But what if I have 10 different filters?

Did I miss any method that satisfies my needs?

Thanks in advance!

Community · Accepted Answer · 2017-05-23 12:02:16Z

4

Either use partition like here RxJS modeling if else control structures with Observables operators

Or instead of filter use map and pipe the object if the former filter condition is true or null otherwise. so you can catch the null where ever you want in your chain with a filter.

Last option call some function in the else part of the filter function

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Mar 12, 2016 at 14:33

Markus

1,0161 gold badge8 silver badges23 bronze badges

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

2 Comments

Benjamin M Over a year ago

Looks a bit hacky, but still quite nice using o.map(val => (val && val.length >= 3)?val:null).subscribe(val => this.results = val==null ? [] : val)

Arlen Beiler Over a year ago

What is "the else part of the filter function"?

Sergiy Pereverziev · Accepted Answer · 2017-07-20 08:17:17Z

4

We've had a similar case and tried it with partition as mentioned above but found it much handier to use throw here. So for your code

this.userInput.valueChanges
    .do(val => {
      if (!val || val.length < 3) {
        throw new ValueTooShortError();
      }
    })
    .switchMap(val => getDataViaHTTP())
    .do(val => this.results = val)
    .catch(() => this.results = [])
    .subscribe();

answered Jul 20, 2017 at 8:17

Sergiy Pereverziev

4072 silver badges8 bronze badges

Comments

Michael Kang · Accepted Answer · 2016-03-12 11:11:50Z

3

I suggest having a common event stream, creating two filtered streams, and merging the two before subscription:

var o = this.userInput.valueChanges;

var empty= o.filter(t=> t.length < 3)
.map(t=>[])

var nonempty = o.filter(t=> t.length >= 3)
    .switchMap(t=> getDataViaHTTP());

empty.merge(nonempty).subscribe(val => this.results = val);

edited Mar 12, 2016 at 11:11

answered Mar 12, 2016 at 10:51

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

2 Comments

Benjamin M Over a year ago

Looks quite good, but how would you do that with 5 filters? I don't want to write each filter in a positive and negative way.

Michael Kang Over a year ago

You could save the merged filter, and combine it with other streams in any number of ways. The positive/negative filters is only in the beginning.

Benjamin M · Accepted Answer · 2016-03-13 14:17:55Z

2

I found another nice solution for my use case using Validators:

(I know that this is no solution using Observables as the question stated. Instead it's using Angular2 features to workaround the problem nicely.)

this.userInput.validator = Validators.compose([
    Validators.required,
    Validators.minLength(3)
]);

this.userInput.valueChanges
    .filter(val => this.userInput.valid)
    .switchMap(val => getDataViaHTTP())
    .subscribe(val => this.results = val);

Now I can use the userInput.valid property and/or the userInput.statusChanges Observable to keep track of the input value.

edited Mar 13, 2016 at 14:17

answered Mar 13, 2016 at 14:06

Benjamin M

24.7k34 gold badges135 silver badges211 bronze badges

Comments

foo-baar · Accepted Answer · 2020-06-11 02:29:43Z

0

May be it's late, but wanted to post for the members still seeking a more cleaner approach to validate IF EMPTY inside .map:

of(fooBar).pipe(
      map(
        (val) =>
          ({
            ...val,
            Foo: (val.Bar
              ? val.Foo.map((e) => ({
                  title: e.Title,
                  link: e.Link,
                }))
              : []) as fooModal[],
          }));

This code returns a empty array if val.bar is missing, but it's just an example you can use any validation & expression instead.

answered Jun 11, 2020 at 2:29

foo-baar

1,1043 gold badges18 silver badges45 bronze badges

Collectives™ on Stack Overflow

RxJs Observable: Execute function if empty/filtered

5 Answers 5

2 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related