Cannot read properties of undefined (reading 'PP')

Issue

I would like to display the data from my JSON file.

Here is an idea of the information that is in the JSON => http://jsonblob.com/954388771009478656

In DTA > PP , I just want to display the variable NOMFAMILLE.

I have an error message:

Cannot read properties of undefined (reading 'PP')

In HTML, I have this:

 <td class="text-center"> {{ dta.PP.NOMFAMILLE}} </td>

In TS,

dta ? : Dta;

private getDta(): void {
    let searchDta = new SearchDta(parseInt(this.registreNational + ''), parseInt(this.fiscalYear + ''), parseInt(this.country + ''));
    this.service.getDta(searchDta).pipe(
        takeUntil(this.unsubscribe$)
    ).subscribe(res => {
        if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
            this.dta = res.DTA;
            console.log("Data RES ");
            console.log(this.dta)
        }
    });
}

I did a console.log, I get the data.

Then...

search-dta.response.ts file

export interface SearchDtaResponse extends ApiResponse {

    DTA: Dta;
}

export interface Dta {
    PP:  PersonnePhysiqueDta;
    PTF_DTA: PortefeuilleDta[] 

}
export interface PortefeuilleDta {
    CLER: string;
    PAYS: number;
    EXERCICE: number;
    STATUTDTA: number;
    NUMEROSUIVI: number;
}

export interface PersonnePhysiqueDta {
    NOMFAMILLE: string; 
    NUMEROREGISTRENATIONAL: number;
    NATIONALITE: string;

}

search-dta.ts file

export class SearchDta {
    registreNational: number;
    fiscalYear: number;
    country: number; 

    constructor(
        registreNational: number = 0,
        fiscalYear: number = 0,
        country: number = 0, 
    ) {
        this.registreNational = registreNational;
        this.fiscalYear =  fiscalYear;
        this.country = country

    }
}

I don't understand why the PP object is not undefined?

Thank you for your help and your time

Solution

The data is being fetched asynchronously, so when the component renders the first time, then this.dta is undefined, hence the error. You can mitigate this by not rendering the td while the data is not there:

<td class="text-center" *ngIf="this.dta"> {{ dta.PP.NOMFAMILLE}} </td>

Or, you could even add an extra ng-content tag for the value itself and put the ngIf on that one (so that the table looks consistent)

<td class="text-center">
  <ng-content *ngIf="this.dta">{{ dta.PP.NOMFAMILLE}}</ng-content>
</td>

Another solution to this issue is to use the optional chaining operator ?.

<td class="text-center" *ngIf="this.dta"> {{ dta?.PP?.NOMFAMILLE}} </td>

Answered By - Octavian Mărculescu