JSON values not displaying if objects are nested - html

Question

Here is my code:
<tbody class="mat-color--white tdw-card-thin tdw-border-2">
<tr class="tdw-hover-up-thin" *ngFor="let item of _mData | tdwSearchfilter: _mSearchField: _mSearchQuery | orderBy: order:reverse:'case-insensitive'; let iRow=index">
<th *ngIf="_mIsCheckable" class="tdw--text-align-right sort-remove">
<mat-checkbox [(ngModel)]="_mIsCheckedList[i]" ></mat-checkbox>
</th>
<th class="tdw-bottom-line-light tdw-padding-v-16 tdw-font-14 tdw-font-open-sans tdw-font-normal mat-color-text--grey-800"
*ngFor="let prop of _mColumns">{{item[prop.key]}}</th>
<th class=" tdw-bottom-line-light tdw-text-align-right" *ngIf="_mOptions">
<button mat-icon-button [matMenuTriggerFor]="optionMenu" (menuClosed)="onMenuClosed(iRow)">
<mat-icon>more_vert</mat-icon>
</button>
</th>
</tr>
</tbody>
and Typescript file will have following data fetched from server.
on server call am assigning these values
this._mColumns = this.tempData.headers;//success.headers;
this._mData = this.tempData.dataList.content;//success.dataList.content;
backend data:
tempData = {
"headers": [
{
"label": "User name",
"key": "userName"
},
{
"label": "First name",
"key": "userInfoDetails.firstName"
},
{
"label": "Middle name",
"key": "userInfoDetails.middleName"
},
{
"label": "Last name",
"key": "userInfoDetails.lastName"
},
{
"label": "Gender",
"key": "userInfoDetails.gender"
},
{
"label": "Personal number",
"key": "userInfoDetails.personalNumber"
},
{
"label": "Email",
"key": "userInfoDetails.emailAddress"
},
{
"label": "Home country",
"key": "userInfoDetails.homeCountry"
},
{
"label": "Career Level",
"key": "userInfoDetails.careerLevel"
},
{
"label": "Career PathwayDesc",
"key": "userInfoDetails.careerPathwayDesc"
},
{
"label": "Business UnitCode",
"key": "userInfoDetails.businessUnitCode"
},
{
"label": "business UnitDescription",
"key": "userInfoDetails.businessUnitDescription"
},
{
"label": "Dept number",
"key": "userInfoDetails.deptNumber"
},
{
"label": "Dept name",
"key": "userInfoDetails.deptName"
},
{
"label": "Operation Code",
"key": "userInfoDetails.operationCode"
},
{
"label": "Operation Description",
"key": "userInfoDetails.operationDescription"
},
{
"label": "DateOf joining",
"key": "userInfoDetails.dateOfJoining"
},
{
"label": "Address",
"key": "userInfoDetails.address"
},
{
"label": "Is contract employee",
"key": "userInfoDetails.isContractEmployee"
},
{
"label": "State",
"key": "userInfoDetails.state"
},
{
"label": "Contact number",
"key": "userInfoDetails.contactNumber"
},
{
"label": "Site name",
"key": "userInfoDetails.site.siteName"
}],
"dataList": {
"content": [
{
"userName": "Syed",
"userInfoDetails": {
"id": 1,
"firstName": "Syed", "middleName": "Akmal", "lastName": "Pasha",
"gender": "male", "personalNumber": 9589489884, "emailAddress": "syed#gmail.com",
"homeCountry": "India"
}
},
{
"userName": "Ryan",
"userInfoDetails": {
"id": 2,
"firstName": "Ryan", "middleName": "Sheiq", "lastName": "Samar",
"gender": "male", "personalNumber": 9589489848, "emailAddress": "syed#gmail.com",
"homeCountry": "Dubai"
}
}
],
"last": true,
"totalPages": 1,
"totalElements": 2,
"size": 20,
"number": 0,
"first": true,
"sort": null,
"numberOfElements": 2
}
};
The issue is it's not able to display the nested object like "userInfoDetails.firstName" but its showing the content of immediate object but not the child object.