Loop through object properties with *ngFor

Question

Loop through object properties with *ngFor

Seeking suggestions on how to iterate over object keys in HTML using *ngFor within Angular 12. The provided data structure is as follows:

{
  "data": [
    {
      "student1": {
        "name": "Jhon",
        "present": false
      },
      "student2": {
        "name": "Bill",
        "present": true
      },
      "student3": {
        "name": "Keth",
        "present": true
      },
      "student4": {
        "name": "Anna",
        "present": true
      },
      "student5": {
        "name": "Vendy",
        "present": false
      },
      "student6": {
        "name": "Tim",
        "present": true
      },
      "student7": {
        "name": "Ron",
        "present": false
      }
    }
  ]
}

angular typescript for-loop ngfor

Answer 1

Answer №1

Check out the code on Stackblitz

Utilize RxJs to transform data for use in template rendering

@Component({
  selector: 'my-app',
  template: `
    <table>
      <tr *ngFor="let student of data$ | async">
        <td>{{student.id}}</td>
        <td>{{student.name}}</td>
        <td>{{student.present}}</td>
      </tr>
    </table>
  `,
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;

  data$ = of(DATA).pipe(
    map((value) => value.data[0]),
    map((obj) => {
      let arr = [];
      for (const id of Object.keys(obj)) {
        arr.push({
          id,
          name: obj[id].name,
          present: obj[id].present,
        });
      }
      return arr;
    })
  );
}

using

const DATA = {
  data: [...]
}

This same approach can be used for handling API responses.

Answer 2

Check out the code on Stackblitz

Utilize RxJs to transform data for use in template rendering

@Component({
  selector: 'my-app',
  template: `
    <table>
      <tr *ngFor="let student of data$ | async">
        <td>{{student.id}}</td>
        <td>{{student.name}}</td>
        <td>{{student.present}}</td>
      </tr>
    </table>
  `,
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;

  data$ = of(DATA).pipe(
    map((value) => value.data[0]),
    map((obj) => {
      let arr = [];
      for (const id of Object.keys(obj)) {
        arr.push({
          id,
          name: obj[id].name,
          present: obj[id].present,
        });
      }
      return arr;
    })
  );
}

using

const DATA = {
  data: [...]
}

This same approach can be used for handling API responses.

Answer 3

Answer №2

The keyValue pipe is a useful tool for iterating through objects in HTML.

public itemsList: any[] = [];

ngOnInit() {
   this.http.fetchData().subscribe(res => {
       this.itemsList = res?.data || []; 
   });
}

<ng-container *ngFor="let item of itemsList | keyvalue">
   {{ item.value.name }}  // Displays student name
   {{ item.value.is_present }}  // Displays present flag
</ng-container>

More information about the keyvalue pipe can be found in the Angular docs here.

Thank you!

Answer 4

The keyValue pipe is a useful tool for iterating through objects in HTML.

public itemsList: any[] = [];

ngOnInit() {
   this.http.fetchData().subscribe(res => {
       this.itemsList = res?.data || []; 
   });
}

<ng-container *ngFor="let item of itemsList | keyvalue">
   {{ item.value.name }}  // Displays student name
   {{ item.value.is_present }}  // Displays present flag
</ng-container>

More information about the keyvalue pipe can be found in the Angular docs here.

Thank you!

Loop through object properties with *ngFor

Answer №1

Answer №2

Similar questions

Unlock TypeScript code suggestions for extended objects

Using RxJs: switchMap conditionally based on the emitted value being empty

Setting up Windows authentication for an ASP.NET Core 6.0 and Angular project: A complete guide

What causes the sudden change of the variable to 0 in C programming language?

When comparing the results of running the NextJS build file and VS Code locally, there are noticeable discrepancies in

Preventing text from wrapping in a TypeScript-generated form: Tips and tricks

Validating React Typescript Props: Ensuring that two specific props do not exist simultaneously

Trouble with styling the Ngx-org-chart in Angular

Adding Profile Photos to Authenticated User Accounts in Firebase / Ionic: A Step-By-Step Guide

Is it possible to incorporate advanced transitions and animations using Angular 4?

Merging two arrays of objects from the same response in JavaScript

Using Mat-Error for Two Way Binding leads to frequent triggering of ngModelChange事件

Jasmine has detected an undefined dependency

Angular: verifying the presence of any of the ng-content slots supplied

What is happening inside this room? Exploring Python's for loop with several inclusions

Encountering notifications and issues pertaining to conflicting dependencies after integrating the angular-oauth2-oidc dependency into the package.json file

The focus of the input is lost when the value is being edited, specifically in the case where ngFor and ng

The sequence of output in TypeScript when using Gulp is similar to running tsc with a tsconfig

Encountering a problem with ng serve while attempting to launch the project

Chrome autocomplete behaves as if the input fields are disabled and cannot be clicked on