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...

Solution 1

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[]>([]);

Solution 2

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.

Solution 3

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...");

Solution 4

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);        
});

View more solutions