Tips for clearing an observable in Angular version 4

Question

Tips for clearing an observable in Angular version 4

In the code snippet below, an observable has been created:

  private permissionSubject = new Subject<any>();
  permissionObservable$ = this.permissionSubject.asObservable();


  constructor( public apiService: ApiService) { }

  updatePermissionsData(permissionData){
    this.permissionSubject.next(permissionData);
  }

  getPermissions(){
    return this.apiService.get('/getUserPrivileges')
    .map(data =>  data)
  }

The purpose here is to push incoming data to the Observable every time it is received.

For instance: Let's say we have an observable -> [1, 2] and we receive a new data which is 3, the updated observable will become [1, 2, 3]

What I want to achieve is to remove the values 1 and 2 from the Observable before adding the new value 3. How can this be done?

Will Observable.empty() accomplish this, and if so, how should I modify my code?

Despite searching on stackoverflow, I couldn't find a solution to my problem, so I'm seeking help here...

Updated code

Subscribing observable

    checkPermissions() {
            this.checkPermService.permissionObservable$.subscribe(
    // The following block gets executed multiple times whenever new data is received via the observable
              data => {
                  this.saveMenuItemsOnPermissions(data)
              }
            )
          }

javascript angular typescript rxjs observable

Answer 1

Answer №1

It appears that there may be a misconception about how Observables function. Your code lacks a buffer or memory structure.

Explanation of Your Code

// Creating an instance of a subject.
// Subjects do not retain memory!! The stream is only pushed to subscribers once.
private permissionSubject = new Subject<any>();

// Restricting `permissionObservable$` to listen without publishing
permissionObservable$ = this.permissionSubject.asObservable();

// Constructor instantiates the apiService
constructor(public apiService: ApiService) { }

// Each time this function is called, permissionData is pushed through
// permissionObservable and its subscribers.
updatePermissionsData(permissionData){
   this.permissionSubject.next(permissionData);
}

// Calling a service and waiting for subscription (probably an http call)
// The map function is unnecessary by the way
getPermissions(){
  return this.apiService.get('/getUserPrivileges')
  .map(data =>  data)
}

Observable.empty()

Create an Observable that emits no items but terminates normally

Observable.empty() is not a method!! It is an observable designed to:

Not emit anything
Pause the stream

Edit:

If you simply want to ignore the first 2 elements of an observable, you can utilize the skip operator.

Skip Operator:

Skip allows you to ignore the first x emissions from the source. Skip is typically used when an observable always emits certain values upon subscription that you want to disregard. This can be useful if the initial values are not necessary or if you are subscribing to a Replay or BehaviorSubject and do not need to take action on the initial values. Consider using skip if you are only interested in later emissions.

// The below code is executed multiple times whenever the observable receives new data (stream data)
checkPermissions() {
  this.checkPermService.permissionObservable$.skip(2)
     .subscribe(data => {
              this.saveMenuItemsOnPermissions(data)
      })
 }

Keep in mind these 2 important points:

Subscription must occur before the observable starts emitting
checkPermissions will ignore the first 2 elements received during subscription, but will capture all subsequent ones.

Answer 2

It appears that there may be a misconception about how Observables function. Your code lacks a buffer or memory structure.

Explanation of Your Code

// Creating an instance of a subject.
// Subjects do not retain memory!! The stream is only pushed to subscribers once.
private permissionSubject = new Subject<any>();

// Restricting `permissionObservable$` to listen without publishing
permissionObservable$ = this.permissionSubject.asObservable();

// Constructor instantiates the apiService
constructor(public apiService: ApiService) { }

// Each time this function is called, permissionData is pushed through
// permissionObservable and its subscribers.
updatePermissionsData(permissionData){
   this.permissionSubject.next(permissionData);
}

// Calling a service and waiting for subscription (probably an http call)
// The map function is unnecessary by the way
getPermissions(){
  return this.apiService.get('/getUserPrivileges')
  .map(data =>  data)
}

Observable.empty()

Create an Observable that emits no items but terminates normally

Observable.empty() is not a method!! It is an observable designed to:

Not emit anything
Pause the stream

Edit:

If you simply want to ignore the first 2 elements of an observable, you can utilize the skip operator.

Skip Operator:

Skip allows you to ignore the first x emissions from the source. Skip is typically used when an observable always emits certain values upon subscription that you want to disregard. This can be useful if the initial values are not necessary or if you are subscribing to a Replay or BehaviorSubject and do not need to take action on the initial values. Consider using skip if you are only interested in later emissions.

// The below code is executed multiple times whenever the observable receives new data (stream data)
checkPermissions() {
  this.checkPermService.permissionObservable$.skip(2)
     .subscribe(data => {
              this.saveMenuItemsOnPermissions(data)
      })
 }

Keep in mind these 2 important points:

Subscription must occur before the observable starts emitting
checkPermissions will ignore the first 2 elements received during subscription, but will capture all subsequent ones.

Tips for clearing an observable in Angular version 4

Answer №1

Similar questions

Is there a way to serve an HTML file using the response object in expressjs while also incorporating an external JavaScript file?

Error in JSON due to the presence of an unexpected token within the

Looking to incorporate ReactiveFormsModule into an Angular custom library, but hitting roadblocks

Is there a way to make AJAX post on another page?

Issue with Ajax form submission functionality not working for sending form data

Error encountered: `TypeError: Unable to access undefined properties (specifically, '0') within the Simple React Project`

Is there a way for me to retrieve data from a v-for loop in VueJS with the Quasar Framework?

Carousel with Bootstrap: Heading positioned over the content

Exploring jQuery Mobile | Moving Seamlessly between Pages

Issue with JQuery click() not triggering on a specific div button

Generate a Year attribute value using the information from the year field in a JSON document

Using Ajax and jQuery to redirect a page with values in ASP.NET

What steps are involved in enabling Server Side Rendering with Next.js?

The Typescript compiler is throwing an error in a JavaScript file, stating that "type aliases can only be used in a .ts file."

Enhance your data visualization with d3.js version 7 by using scaleOrdinal to effortlessly color child nodes in

Turn off logging functionality in a Node.JS environment

Using a function from one class within another class by passing it as a prop

Issue with sending functions to other components in Angular

Experiencing an excessive amount of re-renders

Navigating through JSON data to retrieve specific values and executing repetitive actions