Struggling to access properties of a nested object in TypeScript while using Angular, I encountered the following error: Object is possibly 'undefined'. Here is the code snippet:
export interface Address{
city?: string;
neighborhood?: string;
}
export interface Programming{
backend?: string;
frontend?: string;
}
export interface NestedObject{
firstName?: string;
lastName?: string;
completeAddress?: Array<Address>
fullStackKnowledge?: Array<Programming>
}
this.example=[
// First user
{
firstName: 'Msaddak',
lastName: 'Rouabeh',
completeAddress: [
{
city: 'Gafsa',
neighborhood: 'Cité Hached Lalla',
},
{
city: 'Monastir',
neighborhood: 'Skanes',
}
],
fullStackKnowledge: [
{
backend: 'Express js',
frontend: 'Angular',
},
{
backend: 'Spring boot',
frontend: 'React js',
}
]
},
// Second user
{
firstName: 'Houssem',
lastName: 'Ilahi',
completeAddress: [
{
city: 'Tunis',
neighborhood: 'Bardoo',
},
{
city: 'Nabeul',
neighborhood: 'Mrezka',
}
],
fullStackKnowledge: [
{
backend: '.net',
frontend: 'Vue js',
},
{
backend: 'Express js',
frontend: 'React js',
}
]
}
]
This is how I attempted to access the data: Last name:
{{example[0].completeAddress[0].city}}</div>However, I ran into this error: src/app/nested-objectt/nested-objectt.component.html:6:36 - error TS2532: Object is possibly 'undefined'.