Changing the value of a variable in RxJS filter operator when a certain condition is satisfied

Question

Changing the value of a variable in RxJS filter operator when a certain condition is satisfied

I am facing an issue with my code where the setDischarges method is not being executed if the condition in the filter (!!discharges && !!discharges.length) is met.

loading: boolean;

this.discharge$ = this.dischargeService.getObservable('discharges');
    this.subDischarge = this.discharge$
      .pipe(
        filter((discharges: Discharge[]) => !!discharges && !!discharges.length),
        map((discharges: Discharge[]) => discharges),
      )
      .subscribe((discharges) => this.setDischarges(discharges));

I have attempted to update the loading variable value based on that condition, but it is not working as expected. The issue arises because the code does not subscribe when the condition is not met and therefore cannot execute setDischarges. I need a solution where the loading variable is updated whether the condition is met or not, without affecting the subscription when the condition is not met.

loading: boolean;

this.discharge$ = this.dischargeService.getObservable('discharges');
    this.subDischarge = this.discharge$
      .pipe(
        filter((discharges: Discharge[]) => !!discharges && !!discharges.length 
        ? this.loading = false : this.loading = true),
        map((discharges: Discharge[]) => discharges),
      )
      .subscribe((discharges) => this.setDischarges(discharges));

javascript angular typescript rxjs observable

Answer 1

Answer №1

this.subDischarge = this.discharge$
      .subscribe((discharges) => {
        this.loading = discharges ? true : false;
        this.updateDischargesList(discharges);
      });

Answer 2

this.subDischarge = this.discharge$
      .subscribe((discharges) => {
        this.loading = discharges ? true : false;
        this.updateDischargesList(discharges);
      });

Answer 3

Answer №2

If your question is not clear, I will make an assumption that dischargeService refers to a service call and getObservable returns an observable containing the data from your API request. Just like AJAX calls in JavaScript, all API calls in Angular are asynchronous. Therefore, your code should only set the loading boolean after receiving a response from the service call.

To achieve this, you need to subscribe to the observable. Use the subscribe function to capture the response from the service call. Your code should look something like this:

this.loading = true;
this.dischargeSub = this.dischargeService.getObservable('discharges').subscribe(discharges => {
   // This block will only execute upon successful response
   this.loading = false;
   this.setDischarges(discharges);
}, err => {
   // Handle errors here
});

The variable dischargeSub holds a reference to the subscription, which you can use to unsubscribe when making a new service call or when the component is destroyed.

Answer 4

If your question is not clear, I will make an assumption that dischargeService refers to a service call and getObservable returns an observable containing the data from your API request. Just like AJAX calls in JavaScript, all API calls in Angular are asynchronous. Therefore, your code should only set the loading boolean after receiving a response from the service call.

To achieve this, you need to subscribe to the observable. Use the subscribe function to capture the response from the service call. Your code should look something like this:

this.loading = true;
this.dischargeSub = this.dischargeService.getObservable('discharges').subscribe(discharges => {
   // This block will only execute upon successful response
   this.loading = false;
   this.setDischarges(discharges);
}, err => {
   // Handle errors here
});

The variable dischargeSub holds a reference to the subscription, which you can use to unsubscribe when making a new service call or when the component is destroyed.

Changing the value of a variable in RxJS filter operator when a certain condition is satisfied

Answer №1

Answer №2

Similar questions

Getting an undefined error value in the ionic overlay side menu - what could be causing this issue?

While iterating through a dynamically generated JSON data array, omitting the display of the ID (both title and value) is preferred

Can you advise on how to generate a key to access an environment.ts value within a *ngFor loop? Specifically, I am trying to locate keys that follow the pattern 'environment.{{region}}_couche_url' within the loop

Top strategies for ensuring integrity in your frontend React game and preventing cheating

What is the solution to the strict mode issue in ANGULAR when it comes to declaring a variable without initializing it?

FabricJS Canvas with a React DropDown Feature

Expand the div width to the specified measurement horizontally

Adding a fresh data point to Highcharts

Troubleshooting problem with image loading in AngularJS using ng-repeat

Encountering some problems while trying to use {return this.getAll.get(this.url)} to consume an API within Angular

Executing HTML code upon reaching the index.php page

First Impressions of Datatables

When running the command "ionic capacitor run android", the task of compiling debugJavaWithJavac failed in the capacitor app

The Slider component in Material UI's API may not properly render when using decimal numbers as steps or marks in React

Failed installation of Semantic-ui through npm encountered

What is preventing the dependency injection of AuthHttp (angular2-jwt) into a component?

Guide on implementing an onClick trigger for an IconButton contained within a TableCell

Using jQuery to dynamically alter image source based on class modification

Learn how to implement Redux login to display the first letter of a user's name and their login name simultaneously

A clever way to transfer the "HTML SELECT VALUE" to a different webpage using ajax without the need to refresh the page