rxjs subscription returning duplicates

[rj]

After making a subscription from Angular service, the returning results are bunch of duplicates. For every call, the number of duplicates increase by one.

I tried console logging the results at various stages of the app. The duplicates are returned immediately after the promise get rendered

Angular Service code:

GetUserPendingApprovals(userid: string) {
    let approvalsPending: any[] = [];
    this.http
      .get<{message, approvals: any}>(`/api/approvals/${userid}`)
        .subscribe(approvals => {
          console.log(approvals.approvals);
          approvalsPending = approvals.approvals;
          this.approvalsUpdated.next(approvalsPending);
          approvalsPending = [];
      });
  }
  getUserApprovalsUpdateListener() {
    return this.approvalsUpdated.asObservable();
  }

node end point:

app.get("/api/approvals/:userid", (req, res, next) => {
  // const urlData = req.params.userId;
  //console.log(urlData);
  const query = datastore
  .createQuery('approvals')
  .filter('src', '=', req.params.userid);


  query.run().then(approvals => {
  approvals.forEach(approval => console.log(approval));
  console.log(approvals[0].length);
  res.status(200).json(
    {
      message: "Request was processed successfully!",
      approvals: approvals[0]
    }
  );
})
})

The console logging on node endpoint returns a proper count value for the results being queries for. However, console logging of the same results on the Angular service code returns duplicates and the number of duplicates increase by one for every call. Example: 1st call - 2 duplicates, 2nd call - 3 duplicates, 3rd call - 3 duplicates and so on. 

More information...

I am making nested subscription from my angular component. Something like below -

ngOnInit() {
    this.activatedRoute.params
      .subscribe(
        (params: Params) => {
         ....some code goes here...
         this.revenueService.GetUserInvoicesThisWeek(this.userid);
         this.currentWeekInvoicesSub = this.revenueService.GetUserInvoicesThisWeekListener()
            .subscribe((revenueInfo: Revenue[]) => {
            ....some code goes here...
            });
         this.currentDayInvoicesSub = this.revenueService.GetUserInvoicesTodayListener()
            .subscribe((todayRevenueInfo: Revenue[]) => {
            ....some code goes here...
            });
         this.approvalsService.GetUserPendingApprovals(this.userid);
         this.approvalsSub = this.approvalsService.getUserApprovalsUpdateListener()
            .subscribe((approvalsPending: any[]) => {
            ....some code goes here...
            });
         });
}

The last subscription is where i am facing problems. But i am pretty sure the rendered promise right after the node endpoint call is returning duplicates. Something which i mentioned in the beginning of this question.

Doubts:

What would be the root cause for these duplicates?

How to resolve this issue?

[Arnaud Deman]

Hello,

I would say it is because the number of subscriptions increase for every call and unsubscription are not performed.

To test if it is correct you could try to unsubscribe manually or to do something like this:

GetUserPendingApprovals(userid: string) {
    let approvalsPending: any[] = [];
    this.http
      .get<{message, approvals: any}>(`/api/approvals/${userid}`)

       .pipe(take(1))  // unsubscribe automatically after first emission

        .subscribe(...)

Regards

Arnaud.