ERROR TypeError: Cannot read property '0' of undefined

I'm getting this error when I try to print a data from the JSON I get from the API. It does print correctly however this error appears on the console and I'm not sure how to fix it.

HTML

{{datas[0].dimension}}

TS

datas: Data[];
this.abcService.getDatas().subscribe(datas => {
  this.datas = datas;
  console.log(datas);
});

JSON got from the API (console.log)

(1) [{…}]
0:
  dimension:"bla bla bla"
__proto__:Object
length:1

Full error on console

ERROR TypeError: Cannot read property '0' of undefined
    at Object.eval [as updateRenderer] (GraphicsComponent.html:11)
    at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13113)
    at checkAndUpdateView (core.es5.js:12260)
    at callViewAction (core.es5.js:12620)
    at execComponentViewsAction (core.es5.js:12552)
    at checkAndUpdateView (core.es5.js:12261)
    at callViewAction (core.es5.js:12620)
    at execEmbeddedViewsAction (core.es5.js:12578)
    at checkAndUpdateView (core.es5.js:12256)
    at callViewAction (core.es5.js:12620)

DebugContext_ {view: {…}, nodeIndex: 17, nodeDef: {…}, elDef: {…}, elView: {…}}
component: (...)
componentRenderElement:(...)
context:(...)
elDef:{index: 16, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, …}
elOrCompView:(...)
elView:{def: {…}, parent: {…}, viewContainerParent: null, parentNodeDef: {…}, context: GraphicsComponent, …}
injector:(...)
nodeDef:{index: 17, parent: {…}, renderParent: {…}, bindingIndex: 0, outputIndex: 0, …}
nodeIndex:17
providerTokens:(...)
references:(...)
renderNode:(...)
view:{def: {…}, parent: {…}, viewContainerParent: null, parentNodeDef: {…}, context: GraphicsComponent, …}
__proto__:Object

Obs: HTML does print "bla bla bla"

How to handle Cannot read properties of undefined?

The “cannot read property of undefined” error occurs when you attempt to access a property or method of a variable that is undefined . You can fix it by adding an undefined check on the variable before accessing it.

Can not read property 0 of undefined?

To resolve your TypeError: Cannot read properties of undefined (reading '0') , go through these steps: Ensure you are using the correct variable. Perform a simple check on your variable before using it to make sure it is not undefined. Create a default value for the variable to use if it does happen to be undefined.

What is TypeError Cannot read properties of undefined?

Causes for TypeError: Cannot Read Property of Undefined In short, the value is not assigned. In JavaScript, properties or functions are Objects, but undefined is not an object type. If you call the function or property on such variable, you get the error in console TypeError: Cannot read undefined properties.

Should create TypeError Cannot read properties of undefined reading length ')?

The "Cannot read property 'length' of undefined" error occurs when accessing the length property on an undefined value. To solve the error, make sure to only access the length property on data types that support it - arrays or strings.

It should be

{{datas && datas[0]?.dimension}}

For more details see this thread

https://github.com/angular/angular/issues/6798

Another solution is initialize property with empty array:

datas: Data[] = [];

and then just write

{{datas[0]?.dimension}}

Add safe navigation operator to check data is present before accessing since you are getting the response from an asynchronous call

{{datas[0]?.dimension}}

ERROR TypeError: Cannot read property '0' of undefined | Angular 4

Tags:

json

javascript

typescript

angular

Gustavo

People also ask

2 Answers

yurzui

Sajeetharan

Recent Activity

Donate For Us