CODEWITHSUNDEEP
angulartypescript
wael jawadi
wael jawadi

Reputation: 123

How to get loop in nested Json Object

I got this interface that contain Adress which is an object , how to get its value through *ngFor?

export  interface User {
  id: number;
  name: string;
  username: string;
  email: string;
  address: Address;
}


export interface Address {
    street: string;
    suite: string;
    city: string;
    zipcode: string;
  }

<div *ngFor="let oneuser of table">
  <p>{{oneuser.id}}</p>
  <p>{{oneuser.name}}</p>
  <p>{{oneuser.username}}</p>
  <p>{{oneuser.email}}</p>
  <hr>
</div>

Upvotes: 1

Views: 483

Answers (1)

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24406

like this 

<div *ngFor="let oneuser of table">
<p>{{oneuser.id}}</p>
<p>{{oneuser.name}}</p>
<p>{{oneuser.username}}</p>
<p>{{oneuser.email}}</p>
<hr>
<p>{{oneuser.address.street}}</p>
<p>{{oneuser.address.suite}}</p>
<p>{{oneuser.address.city}}</p>
<p>{{oneuser.address.zipcode}}</p>

</div>

Updated

If address is undefined this will throw a common javascript error can't read street of undefined to solve this you can use safe navigation operator (?.) 

<div *ngFor="let oneuser of table">
<p>{{oneuser.id}}</p>
<p>{{oneuser.name}}</p>
<p>{{oneuser.username}}</p>
<p>{{oneuser.email}}</p>
<hr>
<p>{{oneuser.address?.street}}</p>
<p>{{oneuser.address?.suite}}</p>
<p>{{oneuser.address?.city}}</p>
<p>{{oneuser.address?.zipcode}}</p>

</div>

Upvotes: 7

Related Questions