CODEWITHSUNDEEP
javascriptangulartypescript
BAKHALED Ibrahim
BAKHALED Ibrahim

Reputation: 593

Angular: access variable which is declared inside subscribe function

I'm trying to access a variable inside a subscribe function but it returns to me undefined, please any suggestions:

export class InboxmanagementComponent implements OnInit {

       releveBancaireId: number;


   ngOnInit(): void {

      this.displayTaskByIdDetails();
      this.displayReleveBancaireById();
   }

   displayTaskByIdDetails(){
      this._inboxServcie.getTask(this.task.id).subscribe(
           (data) => {
              this.task = data;
              this.releveBancaireId = data.releveBancaireId;  // this is the variable I want to access
           console.log(this.releveBancaireId) // this returs 1 which is right "releveBancaireId" has value 1
          }
      );
    }

    displayReleveBancaireById(){

      this._relebeBancaireService.getReleveBancaireById(this.releveBancaireId).subscribe( // this is where I want to access that variable as a parameter
          (data) => {
              this.releveBancaire = data;
              console.log(data);
          }
      );
    }

}

this.task inside displayTaskByIdDetails function returns this:

enter image description here

Meaning that I have to use that property releveBancaireId which is returned from displayTaskByIdDetails and use it in another function which calls a service as a parameter

This is my service which needs releveBancaireId as a parameter:

 getReleveBancaireById(id: number): Observable<ReleveBancaire>{
        const taskIdUrl = `${this.baseUrl}/${id}`;
        return this.httpClient.get<any>(taskIdUrl).pipe(
            map((response: any) => response)
        );
    }

When compiling console returns undefined

enter image description here

Upvotes: 0

Views: 198

Answers (1)

Henrik B&#248;gelund Lavstsen
Henrik B&#248;gelund Lavstsen

Reputation: 1633

Ok so since the calls are sequential its a perfect opotunity to use mergeMap to chain multple requests. since you still need the data from the first request you can tap that data and retrive it. and on the final subscribe you will get the data from the final request.

export class InboxmanagementComponent implements OnInit {

 releveBancaireId: string;


 ngOnInit(): void {
    this.displayTaskByIdDetails();
 }

  displayTaskByIdDetails(){
    this._inboxServcie.getTask(this.task.id).pipe(
        tap(taskData=>{
            this.task = taskData
            this.releveBancaireId = taskData.releveBancaireId;  // incase you still need this.
        }),
        mergeMap(data=>{
             return  this._relebeBancaireService.getReleveBancaireById(data.releveBancaireId);
        })).subscribe((data) => {
          this.releveBancaire = data;
          console.log(data);
        });
  }
}

Upvotes: 1

Related Questions