Binding and using an object's fields within an object returned by the server API with a PrimeNG data table

Question

Good day

Currently I am returning an array of objects looking like:

{
attendeeCount: 5
bookDay: "2018-11-22T14:06:24.120Z"
bookingComment: "This is a test"
conferenceRoom: {id: 8, name: "Main Boardroom", seatingCount: 10, location: "Site Office", projector: "YES"}
employee: {id: 111, title: "Mr.", initials: "J", preferredName: "John", lastName: "Smith", …}
id: 1
refreshment: {id: 1, name: "Coffee, Tea and Water"}
timeSlot: "07:00 - 07:30"
}

The requirement then is that I should be able to render the PrimeNG data table using TypeScript like the below:

public getRoomRosterTable() {
    this.conferenceRoomBookingService.getRoomRoster(this.dateValue, this.selectedConferenceRoom.id).subscribe(response => {
        console.warn(response);
        this.conferenceRoomBookings = response;
    }, error1 => {
        this.alertService.error(error1);
    });

    this.timeSlotCols = [
        {field: 'timeSlot', header: 'Time Slot'},
        {field: 'employee.preferredName' + 'employee.lastName', header: 'Slot Booked By'},
        {field: 'attendeeCount', header: 'Attendee Count'},
        {field: 'refreshment.name', header: 'Refreshment Details'},
        {field: 'bookingComment', header: 'Booking Comment'}
    ];
}

Combined with html looking like:

<p-table [value]="conferenceRoomBookings" [reorderableColumns]="true" [columns]="timeSlotCols">
                <ng-template pTemplate="header" let-columns>
                    <tr>
                        <th *ngFor="let col of columns">
                            <div style="text-align:center">
                                {{col.header}}
                            </div>
                        </th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-rowData let-columns="columns">
                    <tr>
                        <td *ngFor="let col of columns">
                            {{rowData[col.field]}}
                        </td>
                    </tr>
                </ng-template>
            </p-table>

This however only renders the columns that have direct data bound. I cannot seem to get the table to pick up properties of nested objects.

Is the above possible currently with PrimeNG, or do I need to create a custom DTO on the server returning only 'direct' fields for the PrimeNG table?

Answer 1

Could not get this to work with the PrimeNG table and resorted to using *ngFor combined with *ngIf wrapped in divs to detect nulls:

<table class="table-bordered">
                <thead>
                <tr>
                    <th>
                        <div style="align-content: center">
                            Time Slot
                        </div>
                    </th>
                    <th>
                        <div style="align-content: center">
                            Booked By
                        </div>
                    </th>
                    <th>
                        <div style="align-content: center">
                            Attendee Count
                        </div>
                    </th>
                    <th>
                        <div style="align-content: center">
                            Refreshment Requirement
                        </div>
                    </th>
                    <th>
                        <div style="align-content: center">
                            Booking Details
                        </div>
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let conferenceRoomBooking of conferenceRoomBookings">
                    <td>
                        <div *ngIf="conferenceRoomBooking.timeSlot">
                            {{conferenceRoomBooking.timeSlot}}
                        </div>
                    </td>
                    <td>
                        <div *ngIf="conferenceRoomBooking.employee">
                            {{conferenceRoomBooking.employee.preferredName}} {{conferenceRoomBooking.employee.lastName}}
                        </div>
                    </td>
                    <td>
                        <div *ngIf="conferenceRoomBooking.attendeeCount">
                            {{conferenceRoomBooking.attendeeCount}}
                        </div>
                    </td>
                    <td>
                        <div *ngIf="conferenceRoomBooking.refreshment">
                            {{conferenceRoomBooking.refreshment.name}}
                        </div>
                    </td>
                    <td>
                        <div *ngIf="conferenceRoomBooking.bookingComment">
                            {{conferenceRoomBooking.bookingComment}}
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>