Why ERROR TypeError: Cannot read properties of undefined (reading ‘length’)?

We Are Going To Discuss About Why ERROR TypeError: Cannot read properties of undefined (reading ‘length’)?. So lets Start this Angular Article.

Why ERROR TypeError: Cannot read properties of undefined (reading ‘length’)?

How to solve Why ERROR TypeError: Cannot read properties of undefined (reading ‘length’)?

The error message
ERROR TypeError: Cannot read properties of undefined (reading ‘length’)
tells you that, at one point in time, the value of expertList is undefined.
So, we can only assume but the probability is high that the value of expertList is loaded via an asynchronous call. That means as long as the call hasn’t returned, the value of expertList stays undefined.
To get rid of the error you need to adjust the condition in your *ngIf.
<div id="Expert" *ngIf="expertList?.length > 0"> ... </div>
By adding a ? the execution of the expression is stopped if a null or undefined value occurs, so the error message does not occur anymore. This is called optional chaining.

Why ERROR TypeError: Cannot read properties of undefined (reading ‘length’)?

The error message
ERROR TypeError: Cannot read properties of undefined (reading ‘length’)
tells you that, at one point in time, the value of expertList is undefined.
So, we can only assume but the probability is high that the value of expertList is loaded via an asynchronous call. That means as long as the call hasn’t returned, the value of expertList stays undefined.
To get rid of the error you need to adjust the condition in your *ngIf.
<div id="Expert" *ngIf="expertList?.length > 0"> ... </div>
By adding a ? the execution of the expression is stopped if a null or undefined value occurs, so the error message does not occur anymore. This is called optional chaining.

Solution 1

The error message

ERROR TypeError: Cannot read properties of undefined (reading ‘length’)

tells you that, at one point in time, the value of expertList is undefined.

So, we can only assume but the probability is high that the value of expertList is loaded via an asynchronous call. That means as long as the call hasn’t returned, the value of expertList stays undefined.

To get rid of the error you need to adjust the condition in your *ngIf.

<div id="Expert" *ngIf="expertList?.length > 0">
  ...
</div>

By adding a ? the execution of the expression is stopped if a null or undefined value occurs, so the error message does not occur anymore. This is called optional chaining.

Original Author Batajus Of This Content

Solution 2

It can be because expertList is not available when the component load. Do you fetch that value through HTTP or something?. If so you can do three things.

On your component’s constructor, initialize the expertList variable with an empty array. expertList = []

You can have a variable isLoad that starts with false on the constructor and when the fetch end, becomes true. This variable should be used on the HTML.

<div *ngIf="isLoad">
    <i class="fas fa-brain"></i>
    <span>Skills: </span>
    <div id="Expert" *ngIf="expertList.length > 0">
      Expert
      <span *ngFor="let skill of expertList">
        {{skill.skill}}
      </span>
    </div>
  </div>

Or you can just check that expertList is not undefined (with the ?).

 <div id="Expert" *ngIf="expertList?.length > 0">
      Expert
      <span *ngFor="let skill of expertList">
        {{skill.skill}}
      </span>
 </div>

Original Author Alejandro Barone Of This Content

Solution 3

Just Add “?” after expertList in ngIf.
It is mostly because initially the property expertList is undefined.
So it has not length property.
the operator “?” will return false instead of error if a variable is undefined

<div id="Expert" *ngIf="expertList?.length > 0">

Original Author Rafaa Ferid Of This Content

Solution 4

You’re probably getting the expertList value from some subscription? Seems that your html is rendering faster than the sub return, so when it hits the check for expertList.length the expertList is probably not returned yet, effectively having nothing to check the .length of. Try with *ngIf="expertList?.length > 0" instead.

Original Author Misha Mashina Of This Content

Conclusion

So This is all About This Tutorial. Hope This Tutorial Helped You. Thank You.

Also Read,

ittutorial team

I am an Information Technology Engineer. I have Completed my MCA And I have 4 Year Plus Experience, I am a web developer with knowledge of multiple back-end platforms Like PHP, Node.js, Python and frontend JavaScript frameworks Like Angular, React, and Vue.

Leave a Comment