Array becomes undefined outside subscribe scope

Question

So in my angular project i created a service which contains a method with http get request as follows:

  getAllProducts(){
return this.http.get<IProduct[]>(this.baseUrl + 'products/all');}

In another component I want to get the IProduct[] array using the service. So inside the component I have

ngOnInit(): void {
   
    this.update();
  }
  update(): void{
    this.adminService.getAllProducts().subscribe(response =>
      {
       this.allProducts = {...response};
       console.log(this.allProducts); //Returns a filled array
      }, error => {
        console.log(error);
      });
    console.log(this.allProducts); //Returns undefined
  }

My question is: How can I copy the httpget result into my component's variable and dont loose it outside the observable scope?

Your goal is already accomplished, its just that you can't console.log it where you try to do it in the last line — Jaqen H'ghar, Apr 11 '21 at 08:47

ukn · Accepted Answer · 2021-04-10T18:26:12.883

You get undefined because the http call returns an observable and you are mixing up sync and async programming. So what happens here is:

onInit calls update()
you subscribe to getAllProducts()
The http call has not completed yet
console.log() print an undefined array since the subscribe has not been executed yet
subscribe triggers because the http call returns
allProducts is assigned

What you want to do is execute your logic from inside the subscribe and if you have to use it in the html then you can use an ngIf if necessary.

Array becomes undefined outside subscribe scope

1 Answers1