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":"[email protected]",
            "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.

5 Answers

0
Sampat Sanap On Best Solutions

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.

0
Peter Wilson On

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

0
Sachila Ranawaka On

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

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

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":"[email protected]",
            "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":"[email protected]",
            "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
   }
}

Now, this can be used in component template the way you intend to use it. For instance, we can do

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

Hope that helps.

0
Community On

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.