Get nested object with httpClient in Angular

Question

I am trying to get the nested object to display in the template with a get request. The issue is it display the main properties of my object, though, the nested object.

export class User {
  userId: number;
  userName: string;
  password: string;
  firstName: string;
  lastName: string;
  role: number;
  inforamation: Information;
}

This is my model which can show user properties but not information.

getAllUsers(){
    const header = new HttpHeaders({
      'Content-Type':  'application/json'
    });
    return this.usersapiservice.getData(this.REST_API_SERVER, {headers : header});
  }



ngOnInit(){
this.getAllUsers().subscribe((data: User[]) => {
      this.users = data;
    });
}

In my html

{{users.firstname}} // work

{{users.information.adress}} // Does not work

Can you do console.log(this.users) after the line this.users = data; and please check how the object looks like in the console — Sivakumar Tadisetti
– Sivakumar Tadisetti, Commented Sep 22, 2020 at 2:31

raychz · Accepted Answer · 2020-09-22 02:35:51Z

2

I see a couple of issues. In the User class, you misspelled one of the properties as inforamation, but in the template, the property is spelled correctly as information.

If you have an array of Users that you want to render, you can use Angular's *ngFor to iterate through them, as shown below:

<div *ngFor="let user of users">
  {{user.firstName}}
  {{user.information.address}}
</div>

answered Sep 22, 2020 at 2:35

raychz

1,2051 gold badge10 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

aymen matador Over a year ago

Woow I didn't expected that. It was the misspelled property "Inforamation" . thx a lot

raychz Over a year ago

No problem! Glad that helped. This kind of error is usually logged in the console of your browser. If you're using Chrome, you can open the console by right-clicking anywhere on the webpage and clicking the "Inspect" option, then navigating to the "Console".

Collectives™ on Stack Overflow

Get nested object with httpClient in Angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related