Table component not displaying a field in an object angular

Question

I'm trying to use the p-table component from primeng however I cannot display student first name and last name because its an object in headArray, what would be the recommended way around this?

My "Student" model

id: number;
name: Name;

and name model

firstName: string;
lastName: string;

HTML

  <p-table [value]="students">
<ng-template pTemplate="header">
  <tr>
    <th *ngFor="let head of headArray">
        {{head.Head}}
    </th>
  </tr>
</ng-template>
<ng-template pTemplate="body" let-student>
  <tr>
    <td *ngFor="let head of headArray">
      {{student[head.FieldName]}}
    </td>
  </tr>
</ng-template>

Typescript

public headArray = [
{ 'Head': 'Last Name', 'FieldName': 'name["lastName"]' },
{ 'Head': 'First Name', 'FieldName': 'name["firstName"]' },
{ 'Head': 'ID', 'FieldName': 'id' }
];

public getStudents(): void {
this.studentService.getStudents().subscribe(
  (response: Student[]) => {
    console.log(response);
    this.students = response;
  },
  (error: HttpErrorResponse) => {
    alert(error.message);
  }
)

I've also tried this but no luck unfortunately

   public headArray = [
    { 'Head': 'Last Name', 'FieldName': 'name.lastName' },
    { 'Head': 'First Name', 'FieldName': 'name.firstName' },
    { 'Head': 'Id', 'FieldName': 'id' }
  ];

the getStudents method is ran when ngOnInit is called and populates an array of students

Nope its only the students that I console logged there – Ziyaad Jan 21 '23 at 06:40 — Ziyaad, Jan 21 '23 at 06:40

score 0 · Accepted Answer · answered Jan 21 '23 at 06:55

To access nested object We could create custom pipe to transform string dot notation to object key

Examples

import { Pipe, PipeTransform } from '@angular/core';
import { Student } from './model';

@Pipe({
  name: 'createPath',
})
export class CreatePathPipe implements PipeTransform {
  transform(student: Student,fieldName?: string): any {
    return fieldName.split('.').reduce((p, c) => (p && p[c]) || null, student);
  }
}

HTML

<td *ngFor="let head of headArray">
      {{ student | createPath: head.FieldName }}
</td>

Working Example

Table component not displaying a field in an object angular

1 Answers1