How can I use result variable from out of the lambda function?

Question

I'm trying to get data from external API. This is my Typescript function:

export class BarChartcomponent implements OnInit{
  public chart: any;
  data: any = [];
  
  constructor(private service:PostService) { }

  ngOnInit(): void {

    this.service.getPosts().subscribe(response => {
     this.data = response;
    });
    
    this.createChart();
  };
}

I want to use "data" variable for further data manipulations, but when I try to use it outside the subscribe function it result "undefined". I know that is a scope error but I don't know how to fix it.

You don't show the code where you use `this.data`. Could it be that the subscribe function is called asynchronously and you use `this.data` _before_ it has been assigned? — Heiko Theißen, Aug 05 '23 at 08:21
Oh, i use the variable in a function below ngOnInit(). Yes, it's possibile that subscribe is asycronous... i'm pretty newbie on typescript/angular — Spumiglio, Aug 05 '23 at 08:26
Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Ivar, Aug 05 '23 at 08:58

score -1 · Answer 1 · answered Aug 05 '23 at 08:26

-1

you have 2 way 1: use promise and then to know when data recived 2: call your method in subscribe

answered Aug 05 '23 at 08:26

sajjad maneshi

56
6

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 09 '23 at 21:40

score -1 · Answer 2 · answered Aug 05 '23 at 08:38

If this.data becomes available only asynchronously, you can use a promise:

ngOnInit(): void {
  this.data = new Promise(function(resolve, reject) {
    this.service.getPosts().subscribe(response => {
      resolve(response);
    });
  }.bind(this));
  this.createChart(); // this function cannot yet access this.data
}

Then, instead of using this.data directly in a synchronous function:

someFunction() {
  console.log(this.data);
}

you must await its value in an asynchronous function:

async someFunction() {
  console.log(await this.data);
}

Note that this make the someFunction also asynchronous, so that its return value (if it has any), must also be awaited. You can never get rid of asynchronousness once it is introduced.

How can I use result variable from out of the lambda function?

2 Answers2