Retrieve a value from json array response in angular 4

Question

I'm able to get all users with their roles from the backend laravel. This is the response.

{
"users": [
    {
        "id": 2,
        "first_name": "user",
        "last_name": "xyz",
        "title": null,
        "email": "user@gmail.com",
        "phone_number": "***-***-****",
        "phone_type": "home",
        "inactive": 0,
        "created_at": null,
        "updated_at": null,
        "is_verified": 0,
        "roles": [
            {
                "id": 1,
                "name": "Account User",
                "pivot": {
                    "user_id": 2,
                    "role_id": 1
                }
            }
        ]
    },

I'm retrieving the users data like this

in ts:

ngOnInit() {
    this.http.get<User>('backend.url')
      .subscribe(data => {
        this.user = data;
        console.log(data);
      });
  }

in html:

<tr *ngFor="let userData of user?.users; trackBy: userThumb">
                <td>{{ userData?.first_name }}</td>

Now, I want to show the role name of the user in a frontend table. How do I retrieve the roles->name in angular 4 from this users array?

Answer 1

look this:

  <tr *ngFor="let userData of user?.users; trackBy: userThumb"> 
    <td *ngFor="let role of userData ?.roles; > {{role ?.name}}</td> 
 </tr>