Error in Angular 6: Undefined property cannot be read

Question

Error in Angular 6: Undefined property cannot be read

Recently, I started using Angular for a project that utilizes Angular for the front end and PHP Laravel for the API. The API is returning a result set structured like this:

{  
   "status":1,
   "msg":"Success",
   "result":{  
      "current_page":1,
      "data":[  
         {  
            "id":3,
            "name":"Sooraj Account II",
            "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d7a4b1b3a4b197a4b1b3b1f9b4b8ba">[email protected]</a>",
            "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
   }
}

In my Angular code, I'm trying to access this result set as follows:

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

However, when I attempt to use result.data, I encounter the following error:

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

I'm puzzled by this error and would appreciate any assistance in resolving it.

angular typescript

Answer 1

Answer №1

To store the information, initialize result={} and then insert the data.

I've generated a StackBlitz link for reference. Feel free to check it out here: StackBlitzLink

I trust this will prove beneficial.

Answer 2

To store the information, initialize result={} and then insert the data.

I've generated a StackBlitz link for reference. Feel free to check it out here: StackBlitzLink

I trust this will prove beneficial.

Answer 3

Answer №2

To properly initialize your component class, make sure to define the property result={} at the start and assign a value to it when you receive the actual data.

Answer 4

To properly initialize your component class, make sure to define the property result={} at the start and assign a value to it when you receive the actual data.

Answer 5

Answer №3

It is likely that the result's value has not been set. To handle this, consider using the optional chaining operator.

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

Answer 6

It is likely that the result's value has not been set. To handle this, consider using the optional chaining operator.

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

Answer 7

Answer №4

The JSON data provided is in the form of an object, which essentially represents objects in a structured way.

{  
   "status":1,
   "msg":"Success",
   "result":{  
      "current_page":1,
      "data":[  
         {  
            "id":3,
            "name":"Sooraj Account II",
            "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81f2e7e5f2d689cfe7e7bffeedbfc190868e8b92ee828e8c">[email protected]</a>",
            "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
   }
}

This object currently does not have a designated name or reference. It should be assigned to a variable so it can be easily referenced elsewhere as needed. For instance,

var response = {  
   "status":1,
   "msg":"Success",
   "result":{  
      "current_page":1,
      "data":[  
         {  
            "id":3,
            "name":"Sooraj Account II",
            "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f88b9e9cbb92969db8cb94bd9fa69297919eb89d83ec808c8e">[email protected]</a>",
            "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
   }
}

Once assigned to a variable, this object can be easily manipulated and used within component templates as required. For example,

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

I hope that clarifies things for you.

Answer 8

The JSON data provided is in the form of an object, which essentially represents objects in a structured way.

{  
   "status":1,
   "msg":"Success",
   "result":{  
      "current_page":1,
      "data":[  
         {  
            "id":3,
            "name":"Sooraj Account II",
            "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81f2e7e5f2d689cfe7e7bffeedbfc190868e8b92ee828e8c">[email protected]</a>",
            "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
   }
}

This object currently does not have a designated name or reference. It should be assigned to a variable so it can be easily referenced elsewhere as needed. For instance,

var response = {  
   "status":1,
   "msg":"Success",
   "result":{  
      "current_page":1,
      "data":[  
         {  
            "id":3,
            "name":"Sooraj Account II",
            "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f88b9e9cbb92969db8cb94bd9fa69297919eb89d83ec808c8e">[email protected]</a>",
            "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
   }
}

Once assigned to a variable, this object can be easily manipulated and used within component templates as required. For example,

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

I hope that clarifies things for you.

Answer 9

Answer №5

If you want to initialize your result variable as empty beforehand, you can do so like this:

result={}

Alternatively, you can place your ng-container within another element that has an ngIf directive:

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

Keep in mind that you cannot use the *ngIf directly on the ng-container itself due to the presence of the *ngFor, as only one attribute prefixed with * is allowed per element.

Answer 10

If you want to initialize your result variable as empty beforehand, you can do so like this:

result={}

Alternatively, you can place your ng-container within another element that has an ngIf directive:

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

Keep in mind that you cannot use the *ngIf directly on the ng-container itself due to the presence of the *ngFor, as only one attribute prefixed with * is allowed per element.

Error in Angular 6: Undefined property cannot be read

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Creating a mapping for a dynamic array of generic types while preserving the connection between their values

Angular Universal and WebSockets: A seamless connection

Testing NestJS Global ModulesExplore how to efficiently use NestJS global

Electron does not have the capability to utilize Google's Speech to Text engine

Is it possible to manipulate an Angular #variableName in order to retrieve an ElementRef for an HTML element?

Have you noticed the issue with Angular's logical OR when using it in the option attribute? It seems that when [(ngModel)] is applied within a select element, the [selected] attribute is unable to change

Using variables in string interpolation

Tips on performing a join query in Firebase Firestore

Revitalize access token with Keycloak in Javascript

Working with Django Rest Framework and Angular 2 to handle the simultaneous upload of multiple files

Error: Bootstrap CSS missing from app created with create-react-app-ts

Discover the complete guide on incorporating a JavaScript library with additional dependencies in Angular 2

The Angular frontend application with proxy configuration is sending requests to the incorrect backend URL

Using ngClass to dynamically compare a single number with an array of numbers in Angular

Organize data into groups by value range using RxJS within an Angular application

The ultimate guide to mastering Angular routing techniques

RxJS: the art of triggering and handling errors

"The issue persists in Angular 5 - I am using ngOnInit to fetch my object from firestore, but surprisingly the view does not reflect any

Angular: Utilizing property interpolation from fetched JSON

Troubleshooting a 400 error when trying to authenticate with Firebase using AngularFire2