Object object is showing instead of data using Angular

Question

I am new in Angular and I am doing a web service request to populate a table. I am using the *ngFor to populate my table. I receive my email correctly but the other elements in tree show as [Object object]

This is my JSON response:

{
    "data": [  
        {
            "id": 1,
            "email": "[email protected]",
            "password": "$2a$10$44ghfG4Ym4COxXbj9pDBuOLBXCPRRDiIM7y77G.XEh7avm2GOxlUC",
            "isAdmin": 0,
            "acessTypes": [
                {
                    "id": 1,
                    "accessTypeName": "User",
                    "subAcessTypeName": "Ver&Escrever"
                }
            ],
            "tomas": [],
            "consultas": [],
            "profile": "NORMALUSER"
        }
    ],
    "dataArray": null,
    "errors": []
}

This is my Angular Code´

<table class="table table-bordered">
          <tr>
            <th>Email</th>
            <th>Tipo de acesso</th>
            <th>SubTipo de acesso</th>
          </tr>
          <tr *ngFor="let user of listUser">
            <td>{{user.email}}</td>
            <td>{{user.acessTypes}}</td>
            <td>{{user.acessTypes}}</td>
          </tr>
        </table>

This is my User component

findAll(){
    this.userService.findAll().subscribe((responseApi: ResponseApi)=>{
      this.listUser = responseApi['data'];
    }, err => {
      this.showMessage({
        type: 'error',
        text: err['error']['error'][0]
      });
     }
    )
  }

If you add json pipe, that should show you full data <td>{{user.acessTypes | json}}</td>. But you definitely need another loop over there to access individual object properties — Amit Chigadani
– Amit Chigadani, Commented Sep 25, 2018 at 14:26
if you simply want to see the all the elements in the array, just use the json pipe like <td>{{ user.acessTypes | json }}</td> — amal
– amal, Commented Sep 25, 2018 at 14:26

Amit Chigadani · Accepted Answer · 2018-09-25 14:33:27Z

2

If you add json pipe, that should show you full data <td>{{user.acessTypes | json}}</td>

But you have to loop through acessTypes array to access individual object properties

<table class="table table-bordered">
    <tr>
        <th>Email</th>
        <th>Tipo de acesso</th>
        <th>SubTipo de acesso</th>
    </tr>
    <tr *ngFor="let user of listUser">
        <td>{{user.email}}</td>
    <ng-container *ngFor="let type of user.acessTypes">
        <td>{{type.accessTypeName}}</td>
         <td>{{type.subAcessTypeName}}</td>
    </ng-container>
    </tr>
</table>

DEMO

answered Sep 25, 2018 at 14:33

Amit Chigadani

29.9k14 gold badges88 silver badges102 bronze badges

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

1 Comment

José Nobre Over a year ago

Thanks, very helpfull :)

Dheeraj Kumar · Accepted Answer · 2018-09-25 14:39:49Z

1

Obviously, because user.acessTypes is an array of object.

You need to access specific values from object.

<tr *ngFor="let user of listUser">
            <td>{{user.email}}</td>
            <td *ngFor="let i of user.acessTypes">{{i.accessTypeName}}</td>
            <td *ngFor="let i of user.acessTypes">{{i.subAcessTypeName}}</td>
</tr>

or using one inner loop.

    <tr *ngFor="let user of listUser">
                <td>{{user.email}}</td>
               <ng-container *ngFor="let i of user.acessTypes" >
                <td>{{i.accessTypeName}}</td>
                <td>{{i.subAcessTypeName}}</td>
               </ng-container>
    </tr>

edited Sep 25, 2018 at 14:39

answered Sep 25, 2018 at 14:24

Dheeraj Kumar

4,2559 gold badges51 silver badges83 bronze badges

8 Comments

José Nobre Over a year ago

Nope, because it return an empty string :)

Dheeraj Kumar Over a year ago

an object will contain empty string as well. :)

José Nobre Over a year ago

The problem is that the object(as you can see in the JSON request) does not contain an empty string

Dheeraj Kumar Over a year ago

that's an array so you need to use indexing over the accessTypes.

José Nobre Over a year ago

Thanks thats it :)

|

User3250 · Accepted Answer · 2018-09-25 14:27:22Z

0

user.acessTypes is an array.

Use index as below.

<td>{{user.acessTypes[0].accessTypeName}}</td>
<td>{{user.acessTypes[0].subAcessTypeName}}</td>

answered Sep 25, 2018 at 14:27

User3250

3,4536 gold badges34 silver badges69 bronze badges

3 Comments

José Nobre Over a year ago

But the user can have more than one accessType :)

User3250 Over a year ago

As in one of the comments, then you would need another ngFor

José Nobre Over a year ago

Can you show an example on how to do a nested ngFor?

Collectives™ on Stack Overflow

Object object is showing instead of data using Angular

3 Answers 3

1 Comment

8 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

8 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related