Angular can't access properties of variables in typescript

Question

I have following code:

data:IQuest[]|any=[];

ngOnInit(){
this.getData();
console.log(this.data[1].Question);
}

getData(){     
  let url = "http://127.0.0.1:5153/Quests";
  this.http.get(url).subscribe(data=>{
  this.data=data;     
});
}

export interface IQuest {
Id: number,
lat: number,
lon: number,
Question:string,
}

I can't access values inside data property in typescript, for example when I call console.log, like in code above I'm getting error like this:

ERROR TypeError: Cannot read properties of undefined (reading 'Question')
at AppComponent.ngOnInit (app.component.ts:32:30)

On the other hand when I want to display values in html, they display properly and there is no problem with access, example:

<div *ngFor="let element of data">
  {{element.question}}
</div>

Which lists value of propertie one under another. So why can't I access those values in TypeScript?

Http Get is asychronus. Meaning that this.data is empty when you call your console.log and therefore this.data[1] is undefined. If you log for example in your subscribe method, it will work. — Fussel
– Fussel, Commented Jan 15, 2023 at 19:35
IQuest[] | any is exactly the same type as any. In fact T | any is exactly any for any type T. Code like that doesn't make any sense therefore. — Aluan Haddad
– Aluan Haddad, Commented Jan 15, 2023 at 20:32

R-D · Accepted Answer · 2023-01-15 19:37:05Z

1

Could try removing the |any on the data definition. Or casting it when you populate it like this.data=data as IQuest[];

answered Jan 15, 2023 at 19:37

R-D

6437 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aluan Haddad Over a year ago

Not sure if it will fix the problem, but he definitely needs to remove that Union because it's nonsense as you hint at. Anyone looking at that code will either become confused or think the author is mad.

Laurence Mommers · Accepted Answer · 2023-01-16 12:25:25Z

You have a couple issues in your code, some have already been mentioned by others.

this.data[1] is accessing the second element in the array which might be different from your html (in case you only return 1 item).
your html is accessing question (lowercase q) while your typescript is accessing Question (uppercase Q).
as mentioned by @Fussel, you are loading your data asynchronously meaning that by the time you do the console.log, the this.data = data may not have been executed yet. Move the console.log directly below this.data = data inside the subscription.

Looking at the other question you've posted (Angular TypeScript cannot read properties of undefined error). Number 3 is probably the cause of this error and when that is fixed number 2 will probably be your next error :). As the debugger shows that you actually return an object with the question (lowercase q) variable. that also means that your IQuest definition is wrong (same goes for the Id property (uppercase I)).

Some other things to watch out for are: saying that this.data is an IQuest[] does not mean it actually is. if your return something else from the HttpClient then javascript will happly put it in that variable.

Also as mentioned by @Nando IQuest[]|any means that the variable is an IQuest[] or might be anything else. This will not fix your issues as this is something used compilte time by typescript and your error is generated in runtime by javascript but it would be better to change it and just remove the |any part.

Collectives™ on Stack Overflow

Angular can't access properties of variables in typescript

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related