What is the best approach to return an Observable value only if it is not null, otherwise invoke an HTTP service to fetch and return the

Question

What is the best approach to return an Observable value only if it is not null, otherwise invoke an HTTP service to fetch and return the

@Injectable()

/***
 * Profile Management Service
 */
export class ManageProfileService {

    private userDetails: any = null;
    public getUserDetails$: Observable<any>

}

I am attempting to subscribe to the GetUserDetails Observable from this service. My goal is for it to return the value of UserDetails if it is not null. If UserDetails is null, I want it to call an HTTP service called "getUserDetails" and return the data received. If the HTTP service request fails, I need it to return null. Any guidance on how to achieve this would be greatly appreciated.

javascript angular typescript

Answer 1

Answer №1

To make the variable UserDetails return as an observable, consider using the RxJS of function.

Here is a sample implementation:

Service

import { of } from 'rxjs';

@Injectable()
export class UserProfileService {
  private UserDetails: any = null;

  public getUserDetails(): Observable<any> {
    return (!!this.UserDetails) ? of(this.UserDetails) : this.http.get('url');
  }
}

You can then subscribe to the observable in the component:

Component

export class ProfileComponent implements OnInit {
  ...

  ngOnInit() {
    this.userProfileService.getUserDetails().subscribe(
      res => {
        // res will be either `this.userProfileService.UserDetails` or response from `http.get('url')`
      },
      err => { }
    );
  }
}

Answer 2

To make the variable UserDetails return as an observable, consider using the RxJS of function.

Here is a sample implementation:

Service

import { of } from 'rxjs';

@Injectable()
export class UserProfileService {
  private UserDetails: any = null;

  public getUserDetails(): Observable<any> {
    return (!!this.UserDetails) ? of(this.UserDetails) : this.http.get('url');
  }
}

You can then subscribe to the observable in the component:

Component

export class ProfileComponent implements OnInit {
  ...

  ngOnInit() {
    this.userProfileService.getUserDetails().subscribe(
      res => {
        // res will be either `this.userProfileService.UserDetails` or response from `http.get('url')`
      },
      err => { }
    );
  }
}

What is the best approach to return an Observable value only if it is not null, otherwise invoke an HTTP service to fetch and return the

Answer №1

Similar questions

What is the best way to showcase a table below a form containing multiple inputs using JavaScript?

The volume control does not work on Howler.js for iOS devices

An empty response was received after making an Ajax request

Error: The Router.use() function expects a middleware function, but it received an undefined value with two middlewares involved

The nth-child selector fails to function properly with a customized MUI component in CSS

Difficulty arises when using relative paths with XMLHttpRequest.send

Vue data will remain inaccessible until the JSON.stringify() function is executed

Having trouble running Ajax with JavaScript on a Wamp server

Post Request to Express API does not produce any output

Embedding a YouTube video in a view player using HTML5

tips for concealing a row in the mui data grid

Check to see if a variable has been assigned a value in the form of a jquery

A Guide To Adding up Values and Assigning Them to Corresponding Objects in Vue

Small-scale vue iterates through elements with v-for but fails to display them

What is preventing me from adding any style to this specific element?

Guide to activating the isActive status on a live link within a map iteration utilizing the NEXTUI navigation bar

Showcasing or concealing.JSON data depending on the selected item in a React and MaterialUI application

Error: An unexpected 'if' token was not caught

Using Page.ResolveClientUrl in JavaScript or jQuery allows for easy resolution of client

Guide to creating a clean and minimalistic tabbed menu using CSS