Why is my array populated only in the subscription function?

Question

In the GetAllMainStore() function, I am able to get the data from the API and the console (from the console.log within the function) shows that there is data in "this.MainStoreArray".

My issue is that when I try and access "this.MainStoreArray" outside of the GetAllMainStore() function, the array is empty. I cannot figure out why this is happening. The console.log that I ran in the ngOnInit function comes out as empty.

  ngOnInit() {

    this.CurrentStore = this.stateService.CurrentStore;
    this.CurrentMainStore = this.stateService.CurrentMainStore;

    this.stateService.CurrentStore = undefined;
    this.stateService.CurrentMainStore = undefined;

    this.GetAllMainStore();

    console.log(this.MainStoreArray);

    // this.EditStoreForm = this.formBuilder.group({
    //   storeId: [this.CurrentStore.storeId],
    //   storeName: [this.CurrentStore.storeName, Validators.required],
    //   storeLocation: [this.CurrentStore.storeLocation],
    //   storeRating: [this.CurrentStore.storeRating]
    // });

  }//ngOnInit

  GetAllMainStore() {

    this.dataService.GetAllMainStores().subscribe((data) => {

      this.MainStoreArray = data;

      console.log(this.MainStoreArray);

    });

  }// get Main Store

score 0 · Accepted Answer · answered Jul 16 '20 at 01:35

0

This is how Asynchronous programming works, Any functionality that directly depends on an asynchronous data should be inside the subscription. If the next statement relies on a state inside the subscription it will not work. Here are more details

answered Jul 16 '20 at 01:35

Sajeetharan

216,225
63
350
396

I was attempting to use data binding to populate an ion-select. How do I go about doing this then? – Shanah Suping Jul 16 '20 at 01:37
yes you can use, but the data will be populated only inside the subscribe – Sajeetharan Jul 16 '20 at 01:38
Is it possible to make the other statements wait for "this.GetAllMainStore()" to complete? – Shanah Suping Jul 16 '20 at 01:55
i am not understanding why you want to do that? why cant you bind the data inside subscribe? – Sajeetharan Jul 16 '20 at 02:11
How do I bind the data to the HTML side inside the subscribe? I don't understand how to do that. – Shanah Suping Jul 16 '20 at 02:19
just bind MainStoreArray on the HTML – Sajeetharan Jul 16 '20 at 02:27
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/217929/discussion-between-shanah-suping-and-sajeetharan). – Shanah Suping Jul 16 '20 at 02:33

Why is my array populated only in the subscription function?

1 Answers1