avoid 'cannot read property of undefined' errors

I installed frxjs-Ngx-Timeline via (This is the demo)

npm i @frxjs/ngx-timeline


It installed latest version, i.e., "@frxjs/ngx-timeline": "^19.0.0". This is my HTML code:

<div class="row row-space">
<mat-card>
<mat-card-header>
<mat-card-title>
Key Dates
</mat-card-title>
</mat-card-header>
<mat-card-content>
<ngx-timeline [events]="events"></ngx-timeline>
</mat-card-content>
</mat-card>
</div>


And this is my typescript code: (I tried with a sample json data)

events = [
{ date: '2023-01-01', title: 'Event 1', description: 'Description for event 1.' },
{ date: '2023-06-01', title: 'Event 2', description: 'Description for event 2.' },
{ date: '2023-06-01', title: 'Event 3', description: 'Description for event 3.' },
{ date: '2023-06-01', title: 'Event 4', description: 'Description for event 4.' },
{ date: '2023-06-01', title: 'Event 5', description: 'Description for event 5.' },
]


When I ran that code, I got this error:

ERROR TypeError: Cannot read properties of undefined (reading 'getTime') at frxjs-ngx-timeline.mjs:880:33
​

So I tried to finetune that JSON with this code:

events = [
{ date: '2023-01-01', title: 'Event 1', description: 'Description for event 1.' },
{ date: '2023-06-01', title: 'Event 2', description: 'Description for event 2.' },
{ date: '2023-06-01', title: 'Event 3', description: 'Description for event 3.' },
{ date: '2023-06-01', title: 'Event 4', description: 'Description for event 4.' },
{ date: '2023-06-01', title: 'Event 5', description: 'Description for event 5.' },
].map(event => ({
...event,
date: this.isValidDate(event.date) ? event.date : 'Invalid date'
}));

isValidDate(date: any): boolean {
return !isNaN(new Date(date).getTime());
}


But that did not fix the error. How can I fix that error?

Continue reading...