The Angular framework is displaying an Object object instead of the expected data

As a beginner in Angular, I am currently working on populating a table using web service request and *ngFor. Although I am able to successfully display the email data, all other elements appear as [Object object].

Here is the JSON response I am receiving:

{
    "data": [  
        {
            "id": 1,
            "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="771d180412371f18031a161e1b5914181a">[email protected]</a>",
            "password": "$2a$10$44ghfG4Ym4COxXbj9pDBuOLBXCPRRDiIM7y77G.XEh7avm2GOxlUC",
            "isAdmin": 0,
            "acessTypes": [
                {
                    "id": 1,
                    "accessTypeName": "User",
                    "subAcessTypeName": "Ver&Escrever"
                }
            ],
            "tomas": [],
            "consultas": [],
            "profile": "NORMALUSER"
        }
    ],
    "dataArray": null,
    "errors": []
}

This is the Angular code implementation:

<table class="table table-bordered">
          <tr>
            <th>Email</th>
            <th>Access Type</th>
            <th>Sub Access Type</th>
          </tr>
          <tr *ngFor="let user of listUser">
            <td>{{user.email}}</td>
            <td>{{user.acessTypes}}</td>
            <td>{{user.acessTypes}}</td>
          </tr>
        </table>

Below 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]
      });
     }
    )
  }

Answer №1

To display the full data, you can use the json pipe like this:

<td>{{user.acessTypes | json}}</td>

Remember to iterate through the 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>

Check out the DEMO here

Answer №2

It's evident that user.acessTypes is an array of objects.

To extract specific values from the objects, you'll need to access them accordingly.

<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>

You can also achieve this by using a single 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>

Answer №3

user.permissionTypes is a list.

To access specific elements, follow the example below.

<td>{{user.permissionTypes[2].typeName}}</td>
<td>{{user.permissionTypes[2].subTypeName}}</td>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error code TS2339 occurs due to the absence of the 'first' property on the 'Observable<boolean>' data type

I'm currently working on a project with a basic shell Angular 6 and .NET Core 2 app. The transition from Angular 4 to Angular 6 didn't go as smoothly as expected, as I encountered some TS property optionality issues which I was able to resolve. ...

Issue: Pipe 'AsyncPipe' received an invalid argument '[object Object]'

I’m encountering an issue while attempting to replicate the steps from a specific YouTube tutorial. At the 8:22 mark of this video, I’m facing the following error: Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe&apos ...

Is there a way to permanently store the CKEditor script in my Angular project, rather than having to call it dynamically

When working on my Angular project, I integrate ckeditor dynamically each time the app is launched by including it in a script tag within the index.html file. However, I've noticed that it's taking longer than expected to load. Is there a way for ...

Error message in Spring Boot: Unable to display index page, error page not found

Currently, I am working on a web application that utilizes spring boot for the backend and angular2 for the frontend. However, when accessing a non-root URL, spring boot returns a whitelabel page since the servlet container is unaware of the angular routin ...

Angular version 7.2.1 encounters an ES6 class ReferenceError when attempting to access 'X' before it has been initialized

I have encountered an issue with my TypeScript class: export class Vehicule extends TrackableEntity { vehiculeId: number; constructor() { super(); return super.proxify(this); } } The target for my TypeScript in tsconfig.json is set to es6: ...

Refreshing the side menu in Ionic 3 post-login

When it comes to displaying side menu items based on the user's role, I run into an issue in app.html. Even though I check if the page's role matches the logged-in role, the menu items don't show up right after logging in. However, upon refr ...

Unable to transition to a different module by leaping

I recently started using Angular 2 and followed all the instructions, but I'm having trouble loading a component from an external module. Plnkr - Take a look at this code. It's very simple with just 3 links and a few empty components (the app co ...

Create an eye-catching hexagon shape in CSS/SCSS with rounded corners, a transparent backdrop, and a

I've been working on recreating a design using HTML, CSS/SCSS in Angular. The design can be viewed here: NFT Landing Page Design Here is a snippet of the code I have implemented so far (Typescript, SCSS, HTML): [Code here] [CSS styles here] [H ...

Errors may arise in Typescript when attempting to block the default behavior of DataGrid onRowEditStop

Hey there! I'm new to posting questions here and could use some help. I'm encountering a minor issue while trying to prevent the default behavior of the "Enter" key in the "onRowEditStop" method of the DataGrid component. Here's my code sni ...

Angular 9 Service that Retrieves Configuration Data Post-Login and Post-Page Reload

While I am still in the process of learning Angular, I do not have much experience with it yet. My current goal is to create a service in Angular 9 that retrieves a configuration object from the app config (with an endpoint from the backend) upon successfu ...

Discover the keys of a record using Typescript within a function

I am looking to limit the parameter that can be passed when executing the next function to only the keys of the object provided in createTransitions. This limitation should be applicable across all transitions, as each transition may have different keys. t ...

Enter the newest addition of the node.js layer that bridges the gap between user interface and

Currently, I am in the process of creating a solution on AWS that relies on Cognito for managing users. To kickstart this project, I have referenced the SAAS QuickStart guide available at: SAAS QuickStart However, I am making a significant change by aim ...

Encountering difficulties setting a value to a key within an Object in Angular/Typescript

I'm currently working with Angular, and I've encountered an issue while trying to assign a value to a key within my model. Here's a snippet of my code: export class aa{ types: bb[]; } export interface bb{ name: string; age: str ...

Breaking apart a combination of unions into a collective group of tuples within TypeScript

Looking for a solution similar to TypeScript extract union type from tuple, this question delves into how to split ['a' | 'b', number] into ['a', number] | ['b', number] rather than focusing on why they are not direc ...

An issue has occurred: Angular2 is reporting that Observable_1.Observable.defer is not recognized as a

Recently, I made the transition of my Angular app from version 4 to 6. Here is a peek at my package details: Package.json file: { "version": "0.10.50", "license": "MIT", "angular-cli": {}, ... Upon running npm run start, an error popped up in th ...

The error message "Property 'DecalGeometry' is not found in the type 'typeof "..node_modules/@types/three/index"'."

Within my Angular6 application, I am utilizing 'three.js' and 'three-decal-geometry'. Here is a snippet of the necessary imports: import * as THREE from 'three'; import * as OBJLoader from 'three-obj-loader'; import ...

Cannot be assigned to type "never" after applying a type predicate

I'm attempting to merge a method for creating strongly typed strings with type predicates but encountering issues, as evidenced by the following code snippet: https://i.sstatic.net/2b9pO.png The issue I'm facing is TS2339: Property 'substr& ...

Application fails to launch after disabling unsafe-eval in the restricted Content Security Policy settings

Description My application is facing issues due to having a restricted CSP policy that does not allow unsafe-eval for scripts. When I add a Content-Security-Policy header without unsafe-eval, my application fails to load. Minimal Reproduction The restric ...

A guide on creating a LoopBack 4 REST API to fetch data from a MySQL database

I am currently diving into the world of Loopback 4. I have successfully created a model, repository, and datasource in connection with MySQL. This has enabled me to retrieve results from http://127.0.0.1:3000/myapi/{id}. In my initial setup, obtaining dat ...

Handling errors in Angular and rxjs when encountering undefined returns in find operations

I am currently faced with the challenge of catching an error when the variable selectionId, derived from my route, is null or contains an invalid value. My code structure has a mechanism in place to handle errors when the category variable is undefined, bu ...