Angular 6 : Cannot read property of undefined

error typeerror: cannot read property of undefined angular 8
cannot read property of undefined angular 4
cannot read property of undefined typescript
cannot read property 'value' of undefined angular 7
cannot read property of undefined angular service
cannot read property of undefined angular input
cannot read property 'firstname' of undefined angular 7
error typeerror: cannot read property of undefined angular 9

I'm new to angular . Currently i'm working on a project that uses angular as frontend and php laravel as api. I'm getting a result set from api like this

{  
   "status":1,
   "msg":"Success",
   "result":{  
      "current_page":1,
      "data":[  
         {  
            "id":3,
            "name":"Sooraj Account II",
            "email":"sfdsf@sfdf.com",
            "phone":"2134234234",
            "send_on":"17 \/ Apr \/ 2019",
            "listing_heading":"Listing three1",
            "listing_id":2
         }
      ],
      "first_page_url":"http:\/\/localhost:8000\/api\/auth\/getLeadsByBroker?page=1",
      "from":1,
      "last_page":2,
      "last_page_url":"http:\/\/localhost:8000\/api\/auth\/getLeadsByBroker?page=2",
      "next_page_url":"http:\/\/localhost:8000\/api\/auth\/getLeadsByBroker?page=2",
      "path":"http:\/\/localhost:8000\/api\/auth\/getLeadsByBroker",
      "per_page":1,
      "prev_page_url":null,
      "to":1,
      "total":2
   }
}

and i called this result set in angular like this

<ng-container *ngFor="let brkrleads of result.data">
....
</ng-container>

but while i using result.data i'm facing this error

BrokerleadsComponent.html:70 ERROR TypeError: Cannot read property 'data' of undefined

i don't know why this error occured can anyone please help.

Set the property result={} and then set the data into it.

I have created stackblitz link Please Click here StackblitzLink

I hope this will be useful.

Angular 6+ TypeError: Cannot read property 'firstName' of undefined , You are right, ideally we shouldn't put the checking logic in the view. You can do something like this: In your component: public firstName: string� Angular version: "@angular/core": "6.1.7" Forgot to add, you have to import the CardModule in the module that your component is declared 👍 7 😄 2 🎉 3 ️ 2

you have to set property result={} at the beginning of your component class then set its value when you have the actual data

ANGULAR 7 TypeError Cannot read property of undefined, In this tutorial, we will see a most common error faced by the Angular developers named as Duration: 13:13 Posted: Feb 3, 2019 TypeError: Cannot read property 'length' of undefined Am I doing anything wrong here, or do I have to add some other configuration? Can anybody please help me out here?

probably value for result is not set. use the optional operator

<ng-container *ngFor="let brkrleads of result?.data">

[Angular] TypeError: Cannot read property 'value' of undefined , [Angular] TypeError: Cannot read property 'value' of undefined #7157 [Angular] [bug] Automatic component declaration for Angular not working with 6 5. @ pascaliske pascaliske mentioned this issue on Jun 28, 2019. Cannot invoke an expression whose type lacks a call signature. Type 'void' has no compatible call signatures; SQL create aggregated result from 2 queries; how to create and send a vxlan packet wit gopacket? add numbers to new lines separated by comma; uncaught syntex error: unexpected end of input

The JSON payload you have shared is an object. To put it in a different way, JSON is a way to represent objects. Essentially this,

{  
   "status":1,
   "msg":"Success",
   "result":{  
      "current_page":1,
      "data":[  
         {  
            "id":3,
            "name":"Sooraj Account II",
            "email":"sfdsf@sfdf.com",
            "phone":"2134234234",
            "send_on":"17 \/ Apr \/ 2019",
            "listing_heading":"Listing three1",
            "listing_id":2
         }
      ],
      "first_page_url":"http:\/\/localhost:8000\/api\/auth\/getLeadsByBroker?page=1",
      "from":1,
      "last_page":2,
      "last_page_url":"http:\/\/localhost:8000\/api\/auth\/getLeadsByBroker?page=2",
      "next_page_url":"http:\/\/localhost:8000\/api\/auth\/getLeadsByBroker?page=2",
      "path":"http:\/\/localhost:8000\/api\/auth\/getLeadsByBroker",
      "per_page":1,
      "prev_page_url":null,
      "to":1,
      "total":2
   }
}

is an object without a name. Or to put it in a different way, it hasn't been assigned. It should be assigned to an object so that it can referenced elsewhere. That is,

var response = {  
   "status":1,
   "msg":"Success",
   "result":{  
      "current_page":1,
      "data":[  
         {  
            "id":3,
            "name":"Sooraj Account II",
            "email":"sfdsf@sfdf.com",
            "phone":"2134234234",
            "send_on":"17 \/ Apr \/ 2019",
            "listing_heading":"Listing three1",
            "listing_id":2
         }
      ],
      "first_page_url":"http:\/\/localhost:8000\/api\/auth\/getLeadsByBroker?page=1",
      "from":1,
      "last_page":2,
      "last_page_url":"http:\/\/localhost:8000\/api\/auth\/getLeadsByBroker?page=2",
      "next_page_url":"http:\/\/localhost:8000\/api\/auth\/getLeadsByBroker?page=2",
      "path":"http:\/\/localhost:8000\/api\/auth\/getLeadsByBroker",
      "per_page":1,
      "prev_page_url":null,
      "to":1,
      "total":2
   }
}

ERROR TypeError: Cannot read property 'state' of undefined � Issue , I updated all of my npm modules including angular 4 --> 5, and this error occured. ERROR TypeError: Cannot read property 'state' of undefined� Angular TypeError: Cannot read property ‘id’ of undefined. Posted on June 30, Cannot read property ‘id’ of undefined. Share this: Twitter; Facebook; More

You can either set your result variable to be empty beforehand:

result={}

Or you can nest your ng-container in another element containing an ngIf:

<div *ngIf="result">
  <ng-container *ngFor="let brkrleads of response.result.data">
    ...
  </ng-container>
</div>

You won't be able to put the *ngIf on the ng-container itself as there is already the *ngFor and only one attribute prefixed with * is allowed at a time.

Prevent “Cannot read property '…' of undefined” errors with , Every developer who did some JavaScript has got errors like “Cannot read property '… of undefined” errors with JavaScript Classes + TypeScript using GraphQL in an Angular 8 application with Apollo Client feels like… "Cannot read property 'ngInjectableDef' of undefined" when trigger the function (Angular 6 Universal with firebase cloud functions) #284 shaddock601 opened this issue Jul 25, 2018 · 5 comments Comments

Uncaught TypeError: Cannot read property of undefined In , Out of the six primitive types defined in JavaScript, namely boolean, string, symbol, number, Null, and undefined, no other type throws as many errors as� … a string Closes angular#166, Closes angular#172, Closes angular#174 gkalpak mentioned this issue Dec 10, 2014 TypeError: Cannot read property 'replace' of undefined #177

Uncaught TypeError: Cannot read property of undefined In JavaScript, Uncaught TypeError: Cannot read property of undefined. JavaScript TypeError is thrown when an operand or argument passed to a function is incompatible with� Dismiss Join GitHub today. GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

Avoiding those dang cannot read property of undefined errors , Uncaught TypeError: Cannot read property 'foo' of undefined. The dreaded error we all hit at some point in JavaScript development. Could be�

Comments
  • Can you try this <ng-container *ngIf="result.data" *ngFor="let brkrleads of result.data"> .... </ng-container> ? Second, try to console.log(result).
  • its a nice way to check object using these way