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?

`var obj = JSON.parse(response);` And then you could use obj.users[0].roles[0].name — Ron Nabuurs, Apr 05 '18 at 13:18
What exactly is the desired result? An array with all the `name`s (excluding duplicates?) of all the `roles` of all the `users`? — bugs, Apr 05 '18 at 13:18
It's not a _JSON_ it's a javascript object! [`JSON vs js object`](https://stackoverflow.com/questions/8294088/javascript-object-vs-json?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa) — The Reason, Apr 05 '18 at 13:22
@yer but the edit doesn't change anything. This has nothing to do with any of Angular, Laravel, or JSON. It is just standard JavaScript syntax for accessing properties. — Aluan Haddad, Apr 05 '18 at 13:22
@ZohidSaidov thanks! Could you tell me without using index on roles because there will multiple users with multiple roles — yer, Apr 05 '18 at 13:27

score 0 · Accepted Answer · answered Apr 05 '18 at 13:43

0

look this:

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

answered Apr 05 '18 at 13:43

Zohid

438
1
3
14

Retrieve a value from json array response in angular 4

1 Answers1