Return a null/empty Observable in Angular 6 with Rxjs 6

Question

I am working on Angular 6 with Rxjs 6 while I have a question regarding returning a null/empty Observable if response failed or has exception, Here is my assumption, my remote api will return an object of IOptionResponse, it contains a message string which could be indicated like 'SUCCESS' or 'FAILED', it also contains a model which is an array of 'IOption' object

export interface IOptionResponse {
    message: string;
    model: IOption[];
}

Here is my service method name, it will return a Observable of IOption array which is the "model" of my remote API result

loadIOptionMembersRelationship(): Observable<IOption[]> {
    return this.httpClient.get<IOptionResponse>('${environment.apiUrl}/api/member/XXX')
        .map(
            (response) => {
                console.log(response);
                // if response.message is success, return IOption[] model
                if (response.message == responseMessage.Success) {
                    return response.model;
                }
                else {
                    // return Observable.empty<IOption[]>(); failed
                    // return new Observable.empty<IOption[]>(); failed
                    // return new EmptyObservable<IOption[]>(); failed
                    // return new Observable<IOption[]>.from([]); failed
                    // Otherwise return a NULL/EMPTY Observable
                    //What should be the correct way to implement here???
                }
            }
        );
}

I've read the post here which is similar, however I tried all the possible solution and they do not work, I am not sure if it's because that posted solutions are out of date or maybe some method changed in rxjs 6 or maybe it's a typescript issue...

It depends how you want to react on such a "Failure". You could throw an Error, that would allow you (and all subscribers of your Method) to handle it with normal catchError(...). An empty Observable or one with "undefined" as content will go through the whole stream, every map, every tap, everything. All those places than have to know how to handle this "empty" Observable. If it´s an error, make it sound and throw an Error, that you can catch later in the eventstream — JanRecker
– JanRecker, Commented Jul 20, 2018 at 7:23
The return of map should not be an observable, so just return null will complete the observable with a null value. If you want to terminate the observable empty in the case of an error, you should be using flatMap or switchMap or similar, where it would be simply empty() to terminate the observable without returning anything, or of(null) to return a null value. — Mark Hughes
– Mark Hughes, Commented Jul 20, 2018 at 9:08

Pooshon Banerjee · Accepted Answer · 2018-12-18 12:33:52Z

12

If you want to return an empty Observable array while using Rxjs6, you need to...

import { of } from 'rxjs';

Then where you want to return your empty Observable array of <IOption[]> type ...

return of<IOption[]>([]);

answered Dec 18, 2018 at 12:33

Pooshon Banerjee

1861 silver badge5 bronze badges

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

1 Comment

Yingding Wang Over a year ago

This is the exact solution for my Observable.of<T[]>([]) Variant in Angular2 and this works now with Angular 7. Sometime, you just want to give an empty arrays back if you can not fetch anything.

CozyAzure · Accepted Answer · 2018-07-20 04:07:28Z

1

Do you care about FAILED results? If you do not (which is quite true since you want to emit an empty Obersavble), you can just simply filter it. Then you do not need to explicitly emit an empty Observable:

 loadIOptionMembersRelationship(): Observable<IOption[]> {
    return this.httpClient.get<IOptionResponse>('${environment.apiUrl}/api/member/XXX')
        .filter(response => response.message === responseMessage.Success) //only emit those response whose message is SUCCESS
        .map(response => response.model);
}

Explicitly returning an empty Observable will terminate the stream, which may or may not be what you want depending on your implementation.

answered Jul 20, 2018 at 4:07

CozyAzure

8,4987 gold badges39 silver badges56 bronze badges

Comments

Mihail · Accepted Answer · 2019-01-29 21:21:17Z

1

All solution from the post you mention will not trigger "next" callback and your workflow will not work. Just simply do

return;

But in this case you will loose error information. I think best way to do it is following

throw new Error("Failed to get the model...");

answered Jan 29, 2019 at 21:21

Mihail

4034 silver badges8 bronze badges

Comments

maniac · Accepted Answer · 2020-08-06 13:25:54Z

1

public yourMethod() {
    return new Observable<SomeType[]>((observer) => {
      return observer.next(null); //when you want to return NULL/Empty.
      observer.next(ActualReturnValue); //When you want to return actual value.
    });
  }

calling the method

this.yourMethod().subscribe(response=> {
  if(response)
        //CODE
  else
        //CODE
        
},error => {
    console.log(error);        
});

answered Aug 6, 2020 at 13:25

maniac

1592 silver badges10 bronze badges

Comments

SirDieter · Accepted Answer · 2018-07-20 08:04:48Z

0

When using map() you transform the data the new observable emits based on its source observable. The problem you have is that you try return an empty Observable although your Observable should return a value of type IOptionsResponse. So your Observable is based of your code an Observable<IOptionsResponse | Observable<IOptionsResponse>>. You could just return null or undefined in your else.

answered Jul 20, 2018 at 8:04

SirDieter

3092 silver badges9 bronze badges

Collectives™ on Stack Overflow

Return a null/empty Observable in Angular 6 with Rxjs 6

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related