Angular 8 ngFor not displaying expected information from object

Question

Angular 8 ngFor not displaying expected information from object

I have a set of data which includes IDs, versions, and user details for Paul and Peter. See below:

var data = {
    id: 1
    version: 1
    user: [
        {
            name: 'paul'
        },
        {
            name: 'peter'
        }
    ],
}

My goal is to display the names listed in the data. However, when I attempt to do so using the code snippet below, nothing appears on the screen:

<ul *ngFor="let dat of data">
  <li>
   {{ dat.user.name }}

  </li>
</ul>

There are no visible errors being thrown either...

Any suggestions on how to resolve this issue?

angular typescript

Answer 1

Answer №1

When attempting to display an array as an object, the for loop may not be able to access the .name property of your user property if it is treated as an array. To resolve this issue, consider using the following approach:

<ul *ngFor="let user of data.user">
  <li>
   {{ user.name }}

  </li>
</ul>

Answer 2

When attempting to display an array as an object, the for loop may not be able to access the .name property of your user property if it is treated as an array. To resolve this issue, consider using the following approach:

<ul *ngFor="let user of data.user">
  <li>
   {{ user.name }}

  </li>
</ul>

Answer 3

Answer №2

To iterate through a list of users, make sure to use the *ngFor on the data.user object:

<ul *ngFor="let person of data.user">

Then, show each user's name using the binding {{ person.name }}

Answer 4

To iterate through a list of users, make sure to use the *ngFor on the data.user object:

<ul *ngFor="let person of data.user">

Then, show each user's name using the binding {{ person.name }}

Angular 8 ngFor not displaying expected information from object

Answer №1

Answer №2

Similar questions

Dynamically adjust row height in AG Grid within an Angular application based on the visibility of other columns

Angular's Readonly component fails to display line breaks

Having an issue with displaying the country name and country code in a table using the Angular7 custom pipe

Double Calling of Angular Subscription

Error exporting variables in NodeJS causing confusion

Injecting constructor for Angular standalone component and service

Angular JS and TypeScript - Issue: ng:areq Invalid Argument "Argument 'XXXXXX' is not a function, received undefined"

Pile of automatically generated elements

Is it possible for a component to have multiple templates that can be switched based on a parameter?

Check out the attributes of a class

When the React Native Expo app is running, the TextInput form is covered by the keyboard

Having trouble getting the Bootstrap 5 Modal to function properly within an Electron app

What are effective strategies for troubleshooting Dependency Injection problems in nest.js?

How can I retrieve query parameters in the Server app directory of Next.js 13 using a function?

How can I make CSS text-overflow ellipsis trigger a pop-up to display lengthy text when clicked?

What is the best approach for incorporating a customized set of valid keywords into a text input field in JHipster while maintaining a sophisticated design?

What is the process of creating an instance of a class based on a string in Typescript?

Navigating through segment tabs on Ionic 3 with a simple swipe

Uploading multiple files simultaneously in React

Tips on effectively utilizing Chart.js with Typescript to avoid encountering any assignable errors