Filter all 'null' values from an Observable

Question

I have a service with a subject:

@Injectable() export class UserService() {
    private currentUserSubject = new BehaviorSubject<User>(null);
    public currentUser = this.currentUserSubject.asObservable().distinctUntilChanged(); 

    ... // emitting new User    
}

Have a component I inject this service into and subscribing on updates:

@Component() export class UserComponent {
    constructor(private userService: UserService) {
        this.userService.currentUser
            .subscribe((user) => {
                // I want to see not null value here
            })
    }
}

I want to apply something to Observable<User> to filter all null values and get into subscribe only when User is actually loaded.

Why don't you just test if it's null in the callback? Alternatively, there is an `Observable.filter`. — jonrsharpe, Mar 27 '17 at 10:12
I do not think it is right decision in terms of good written code. I want to "tell" that I subscribe only to not null values not to all values and filter inside #subscribe. — fasth, Mar 27 '17 at 10:14

score 31 · Answer 1 · edited Jun 22 '20 at 08:21

31

Another way to check the value exists:

public currentUser = this.currentUserSubject
                         .asObservable()
                         .filter<User>(Boolean)
                         .distinctUntilChanged();

edited Jun 22 '20 at 08:21

jenson-button-event

18,101
11
89
155

answered Apr 20 '18 at 11:41

ackuser

5,681
5
40
48

That's a nicer one indeed! – fasth May 23 '18 at 19:30
1

is there documentation for using Boolean class as a param to filter? – Siraj Kakeh Apr 07 '19 at 06:03
It is unclear to me why `BooleanConstructor` class can be used as a predicate function. Can someone explain this to me? – Shachar Har-Shuv May 13 '19 at 08:26
3

@ShacharHar-Shuv he's not using `new` here so it just performs a type conversion. See here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean equivalent to !! but in this case it's more readable since we don't have to introduce a lambda – Andrew Lahikainen May 14 '19 at 02:30
7

You'll lose type interface and rxjs 6.5 will complain about unknown type – user1112008 Aug 02 '19 at 12:28
That's a fantastic use about Class. Works like a charm! – Luca Basilico Nov 28 '19 at 13:34
what @user1112008 commented saved me hours. At this point I can't do a production build using the Angular compiler v9 because I'm using this solution. – MotKohn Apr 23 '20 at 15:12
2

To fix all you need is e.g. filter(Boolean) – MotKohn Apr 23 '20 at 16:42
sure it works but it's not as clear as the accepted answer – Alex Feb 13 '21 at 20:32

score 28 · Answer 2 · answered Feb 09 '20 at 10:02

28

with rxjs@6 and typescript the recommended (readable/maintainable) way is to define the following type guard:

export function isNonNull<T>(value: T): value is NonNullable<T> {
  return value != null;
}

and augment a subject with pipe and filter:

subject.pipe(filter(isNonNull))

answered Feb 09 '20 at 10:02

Amit Portnoy

5,957
2
29
30

in typescript shouldn't the control be !== null ? – Romain Bitard May 13 '20 at 15:58
3

the type NonNullable, refers to null or undefined, not just null. if you want to allow for undefined values (it is not what people usually want), you need to replace the check with !== null and replace NonNullable with something like: `type NotNull = T extends null ? never : T;` – Amit Portnoy May 14 '20 at 08:11
1

Yeah, I ended up using your solution, the only thing that surprised me is the naming (I prefer explicitly say NotNullNorUndefined), it handles null and undefined and is named 'nonNull' but that's perfect for what I wanted ! – Romain Bitard May 15 '20 at 08:54

score 26 · Accepted Answer · answered Mar 27 '17 at 10:14

Add a filter operator to your observable chain. You can filter nulls explicitly or just check that your user is truthy - you will have to make that call depending on your needs.

Filtering out null users only:

public currentUser = this.currentUserSubject
                         .asObservable()
                         .filter(user => user !== null)
                         .distinctUntilChanged();

Wilt · Answer 4 · 2022-02-02T12:20:10.157

12

It's as simple as:

filter(user => !!user),

So would filter these falsy values (link to Falsy on MDN). or alternatively cast to a boolean like this:

filter(user => Boolean(user)),

If user evaluates to false, the filter will not be passed.

Update (after Mick his comment on type checking):

If you want to add some more proper typescript solution you could use a type predicate (user-defined type guard). See documentation on this here on https://www.typescriptlang.org/ .

Assume you have a class User. Example:

const isUser = (user: null|User): user is User => {
  // Using an instance of check here, which is not the most performant
  // but semantically most correct.
  // But you could do an alternative check and return a boolean instead
  return user instanceof User;
}

If you now do:

filter(user => isUser(user));

Typescript will understand that you have an object of type User after the filter.

edited Feb 02 '22 at 12:20

answered May 15 '20 at 16:33

Wilt

41,477
12
152
203

The problem with that is that Typescript doesn't know that user is now definitely defined – Mick Oct 20 '21 at 12:52
@Mick, you can use a type predicate for this. Check documentation [here](https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates). I added an example to my answer. – Wilt Oct 20 '21 at 15:35
I think your answer is obsolet. The one of Amit Portnoy is IMO superior because it provides a generic type while you use the "evil" any and you function is only usable with the User type. – Mick Oct 20 '21 at 15:47
@Mick, sure, just tried to help out with an update. Changed `any` to `null|User` which is more in line with the question. Sorry for wasting your time. Have a nice day. – Wilt Oct 20 '21 at 16:20

score 4 · Answer 5 · answered Aug 10 '21 at 11:37

4

Another option for rxjs@6 is to create another wrapping operator of skipWhile.

// rxjs.utils.js
export const skipNull = () => <T>(source: Observable <T>): Observable<T> => source.pipe(skipWhile(value => value === null));

Usage:

this.observable.pipe(skipNull()).subscribe(...)

answered Aug 10 '21 at 11:37

noamyg

2,747
1
23
44

3

This is very useful because it's reusable – Paul Warelis Jan 19 '22 at 19:16

score 0 · Answer 6 · answered Aug 30 '22 at 23:11

Why do you want to use to BehaviorSubject in the first place?

What you need is to define your state as ReplaySubject ensuring that you'll get the data when the user is updated.

import { BehaviorSubject } from 'rxjs';

const subject = new BehaviorSubject(123);

// two new subscribers will get initial value => output: 123, 123
subject.subscribe(console.log);
subject.subscribe(console.log);

// two subscribers will get new value => output: 456, 456
subject.next(456);

VS Replay subject:

const sub = new ReplaySubject(3);

sub.next(1);
sub.next(2);
sub.subscribe(console.log); // OUTPUT => 1,2
sub.next(3); // OUTPUT => 3
sub.next(4); // OUTPUT => 4
sub.subscribe(console.log); // OUTPUT => 2,3,4 (log of last 3 values from new subscriber)
sub.next(5); // OUTPUT => 5,5 (log from both subscribers)

Filter all 'null' values from an Observable

6 Answers6

It's as simple as:

Update (after Mick his comment on type checking):