This Array is undefined but why? - arrays

Question

I want to check an Array until it's filled and show up a loading dialog but it always tells me
this.events[0] is undefined
ngOnInit() {
this.initMethod();
if(this.events[0].start == this.books[0].date_from_og) {
this.dialog.closeAll();
}
}
But events cant be undefined because it contains event of a calendar which get displayed.
initMethod() {
this.service
.getEmployees()
.subscribe(
(listBooks) => {
this.books = listBooks;
this.events = this.books.map((book) => {
return {
start: new Date(book.date_from_og),
end: new Date(book.date_to_og),
type: ""+book.type,
title: "" + book.device + "",
color: colors.blue,
actions: this.actions,
resizable: {
beforeStart: false,
afterEnd: false
},
draggable: false
}
});
},
(err) => console.log(err)
);
}
}
And Constructor:
constructor(private modal: NgbModal, private service: BookingService, private dialog: MatDialog) {
this.initMethod();
this.dialog.open(DialogLaedt, {
width: '650px'
});

Answer 1

Your issue is that you initMethod() retrieves the result asynchronously.
So when you reach the line with if(this.events[0].start == ... there is no guarantee that the event data has been retrieved from the service yet.
The fix is to move your check inside the subscribe part of your init method (which executes as soon as the observable emits it's value), or let the init method return an observable that you can subscribe to, and perform your check inside that subscription.
Solution 1 - Moving your check inside subscription
ngOnInit() {
this.initMethod();
}
initMethod() {
this.service
.getEmployees()
.subscribe(
(listBooks) => {
this.books = listBooks;
this.events = this.books.map((book) => {
return {
start: new Date(book.date_from_og),
end: new Date(book.date_to_og),
type: ""+book.type,
title: "" + book.device + "",
color: colors.blue,
actions: this.actions,
resizable: {
beforeStart: false,
afterEnd: false
},
draggable: false
}
if(this.events[0].start == this.books[0].date_from_og) {
this.dialog.closeAll();
}
});
},
(err) => console.log(err)
);
}
Solution 2 - Letting your initMethod return an Observable
ngOnInit() {
this.initMethod().subscribe(() => {
if(this.events[0].start == this.books[0].date_from_og) {
this.dialog.closeAll();
}
});
}
initMethod() {
return this.service
.getEmployees()
.pipe(tap(
(listBooks) => {
this.books = listBooks;
this.events = this.books.map((book) => {
return {
start: new Date(book.date_from_og),
end: new Date(book.date_to_og),
type: ""+book.type,
title: "" + book.device + "",
color: colors.blue,
actions: this.actions,
resizable: {
beforeStart: false,
afterEnd: false
},
draggable: false
}
});
}))
}

Answer 2

I have noticed that you are calling the initMethod() twice. Once in the constructor, and once in the ngOninit method.