Switching between two subscriptions in the ngOnInit() method

Question

I have a page where I am populating invoices into a grid. In the grid there is an option to view the payments for a particular invoice. The button switches the user from the invoices page to the payments page where it then filters all the payments so that only the payment that corresponds to that particular invoice will show up. Also, when clicking on the payments page itself, it populates all payments into a grid. I have both of these things accomplished in the ngOnInit() method, however, I need to be able to switch between the two. In other words, I want to filter the payments when a user clicks the button on the invoices page and when a user clicks on the payments tab in the navbar I want it to show all payments. So, I have tested both subscriptions and know they work, but how can I switch between the two subscriptions to accomplish this? Any help is appreciated.

I have played around with different variables and equality checks in the if statement and have even tried changing the line location of the if statement but to no prevail

ngOnInit() {
  this.sub = this.route.params.subscribe(
    params => {
      if (params == null) { //HERE LIES THE ISSUE
         this.invoiceNum = params['invoiceNum'];

         //displays FILTERED payments
        this.paymentService.showPayments(this.invoiceNum).subscribe(
        res => {
          this.payments = res.value;
          this.loading = false;
          console.log(res);
        },  
        err => {
          if (err.status == 401) {
            this.auth.logOut();
          }
          this.loading = false;
          console.log(err);
        }
      );
    } else {

      //displays ALL payments
      this.paymentService.getPayments().subscribe(
        res => {
          this.payments = res.value;
          this.loading = false;
          console.log(res);
        },
        err => {
          if (err.status == 401) {
            this.auth.logOut();
          }
          this.loading = false;
          console.log(err);
        }
      );
    }
   }
 );
}

Why are you testing if params is null? First of all, it will never be null, and second, if it's null, how could it contain the parameter invoiceNum? Why don't you just get the invoiceNum param, and test if **that** parameter is defined? Also, dont duplicate all the code. The only difference between the two branches is how you get the observable. — JB Nizet, Jul 03 '19 at 13:43
Testing for 401 in each and every http call is also something you really shouldn't do. This should be in an interceptor, once and for all. — JB Nizet, Jul 03 '19 at 13:44
I appreciate you suggestions and best-coding-practices JB. Just to clarify, when you say get the invoiceNum param do you mean something along the lines of this.invoiceNum? — Austin Lupo, Jul 03 '19 at 14:48

score 0 · Answer 1 · answered Jul 03 '19 at 14:49

You can use switchMap. switchMap can return different subjects for a condition.

This solution switches Route Parameter Changes subject to HTTP Request for payments subject. If router params contains invoiceNum, it will return subject of specific payments for the invoiceNum. Or, it will return subject of all payments.

You can reuse your onNext/onError callback for both cases.

ngOnInit() {
  this.sub = this.route.params
  .pipe(
    switchMap(params => {
      if (params['invoiceNum'] !== undefined) {
        //displays FILTERED payments
        return this.paymentService.showPayments(this.invoiceNum);
      } else {
        //displays ALL payments
        this.paymentService.getPayments();
      }
    })
  )
  // Reuse onNext/onError callbacks
  .subscribe(
    res => {
      this.payments = res.value;
      this.loading = false;
      console.log(res);
    },  
    err => {
      if (err.status == 401) {
        this.auth.logOut();
      }
      this.loading = false;
      console.log(err);
    }
  );
}

I appreciate you suggestion kuroneko. I have attempted to implement it into my code but am getting the follow error "Property 'value' does not exist on type '{}'." I removed the .value to see if that would shut the compiler up but then I got "Type '{}' is missing the following properties from type 'any[]': length, pop, push, concat, and 26 more." Any ideas? I haven't much luck with online resources to help solve this issue. Thanks again. — Austin Lupo, Jul 03 '19 at 15:45
It's just a type error. Please tell me the types of `this.paymentService.showPayments(this.invoiceNum)` and `this.paymentService.getPayments()`. Do they commonly have the property `value`? — kuroneko0441, Jul 04 '19 at 00:28

Switching between two subscriptions in the ngOnInit() method

1 Answers1