Data outside subscribe() in Angular is null. How do I update global variable with the results from inside the subscribe method

Question

Variable assigned inside subscribe is empty outside subscribe? This question did not get a satisfying response. I also struggled a lot with updating a global variable with the results from the API call inside the subscribe method.

How do I return the response from an asynchronous call? Responses to this question still do not allow one to globally update a value from a returned API response.

Reason being, I wanted to make an API call once, and reuse the returned data in other components as well.

product: Product = null;
 this.httpClient.get('your URL').subscribe((response)=>{ 
 product = response as Product;

 // prints the correct API response.
 console.log(product);
 });
 
// Issue
// prints NULL or nothing.
console.log(product);

Please find my answer below!

It's just another flavour of https://stackoverflow.com/q/14220321/3001761 — jonrsharpe, Aug 15 '23 at 22:11
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) — kvetis, Aug 16 '23 at 15:11
1) you`re not asking a new question 2) you question does not include any code 3) your question already has an answer in the question I linked — kvetis, Aug 17 '23 at 07:42
@kvetis this is not intended to be a new question but an alternative approach to it (my approach is in the answers below). Oh about not including the code, thanks I have edited my question and added it. — Sibulele, Aug 17 '23 at 08:15

Sibulele · Accepted Answer · 2023-08-16T07:32:19.090

What causes this issue is because API calls in Angular are performed asynchronously, i.e The whole other parts of your program get executed regardless of whether the API call has returned the results or not. API calls can take some time to finish, and for this reason, making them run on their own thread helps to prevent glitches or stalls in your application. As a results, when you console.log() your global variable, it will be null.

So somehow, we want to wait for the API call until it finishes then we can successfully update our global variable.

A simple solution is using an Angular built-in class called BehaviorSubject. I won't explain further about it, I will just show how it gets the job done.

globally declare your variable this way:

productBehaviourSubject: BehaviorSubject<any> = new BehaviorSubject<any>(0);

And now, the subscribe body, will look like this:

 this.httpClient.get('your URL').subscribe((response)=>{ 
  this.productBehaviourSubject.next(response as Product);
});

Assuming that you are fetching a product. If it's a list of products, simply replace this.productBehaviourSubject.next(response as Product); with this.productBehaviourSubject.next(response as Product[]);

You can now access this variable globally with updated changes. However now, to use this.productBehaviourSubject, you need to subscribe to it and do whatever that you want to do inside the body of the subscribe method. Like this

this.productBehaviourSubject.asObservable().subscribe( (product)=> {
      console.log(product)
      // Do your stuff here
      // And it can only be inside this method.
     // outside this method, values will be null.
    
    })

Now you can pass around this.productBehaviourSubject to any component, it will work fine

Data outside subscribe() in Angular is null. How do I update global variable with the results from inside the subscribe method

1 Answers1

Linked