How to fix when Console returns the whole array but returning "undefined" when you want the first element of it

Issue

I think the screenshot below explains my problem well. Console is returning the whole array successfully. But when I want the first element of it, it returns "undefined".
I am pasting the .ts file's related part below as well. Thanks in advance.

Solution

You console debugging code console.log(..) statements have executed first before the subscription results are returned. Even though this will give the array output, the first element of the array is showing as undefined since an element is being pushed into the array from the service response while the console method is reading the array element.

In your call to the service that is subscribed, move the console logging into the subscription response block as shown:

myArrayData: any[] = whatever your array value is

...

this.api.MyServiceMethod().subscribe((response: any) =>
{
    this.myArrayData.push(..response.data);

    console.log("myArrayData = " + this.myArrayData);
    console.log("myArrayData[0] = " + this.myArrayData[0]);
});

Answered By - Andrew Halil