A variable call returns value 'undefined' outside of a subscriber function

Question

A similar question to this has been asked previously and received quite a lot of responses and i might sound repetitive to someone, but it's just that am in desperate need of a third eye. I am assigning a value to a variable inside a subscriber function in angular but the variable returns 'undefined' when called outside of the Subscribe function. This is what am doing:

    this.invoiceService.buildDataForDiscountGraph(this.usrId, this.currentYear)
      .subscribe( response => {
        this.discountsGraphData += response;
        //this.discountGraphData is of type 'string'
    });

This.discountsGraphData

returns the desired value when called within the subscriber, but outside of the subscriber, in another function, and even my template it's an empty string.

This is the look of the buildDataForDiscountGraph() function:

buildDataForDiscountGraph(u,y){
    return this.getUserInvoices(u)
      .pipe(
        map(response  => {
          if(Object.keys(response).length > 0)
          {
            let jan = 0, feb = 0, mar = 0, apr = 0;
            let may = 0, june = 0, july = 0, aug = 0;
            let sep = 0, oct = 0, nov = 0, dec = 0;

            for(let x = 0; x < Object.keys(response).length; x++) {
              let dateSplit = response[x]['datecreated'].split('-');
              let year = dateSplit[0];
              let month = dateSplit[1];

              if(y == year){
                if(month == '01')jan += response[x]['discount'];
                if(month == '02')feb += response[x]['discount'];
                if(month == '03')mar += response[x]['discount'];
                if(month == '04')apr += response[x]['discount'];
                if(month == '05')may += response[x]['discount'];
                if(month == '06')june += response[x]['discount'];
                if(month == '07')july += response[x]['discount'];
                if(month == '08')aug += response[x]['discount'];
                if(month == '09')sep += response[x]['discount'];
                if(month == '10')oct += response[x]['discount'];
                if(month == '11')nov += response[x]['discount'];
                if(month == '12')dec += response[x]['discount'];
              }
            }

            return [
              jan, feb, mar, apr, may, june, july, aug,
              sep, oct, nov, dec
            ].join();
          }  
      })
    )
  }

I had to move the code into my service in an attempt to figure out what is causing it. The Service function getUserInvoices() calls an endpoint like so;

/**
   * Get Invoices
   *
   * @param userId
   * @param Limit
   * @param Offset
   */
  getUserInvoices(usrId, limit?, offset?){
    return this.http.get(this.apiEndPoint + usrId + '/invoices?limit=' + limit + '&offset=' + offset)
      .pipe(
        map( data =>
          {
            return (data ? data : []);
          }
        )
      )
  }

Answer 1

You can set this.discountGraphData outside the subscriber using function

this.invoiceService.buildDataForDiscountGraph(this.usrId, this.currentYear)
  .subscribe( response => {
      this.setDate(response);
    //this.discountsGraphData += response;
    //this.discountGraphData is of type 'string'
});

setDate(data){
    this.discountsGraphData = data;
    console.log(this.discountsGraphData);  --> you will get value here.
}