I have this piece of code that's subscribing from our own service:
Method getVideo()
getVideo() {
this.watchService.getVideoByVideoString(this.videoId).subscribe(
(Response) => {
this.videoData = Response;
console.log(Response);
},
(err) => console.log(err)
);
}
ngOnInit Method
ngOnInit() {
this.getVideo();
console.log(this.videoData);
}
But the variable in case, this.videoData when I console.log on it, it returns as undefined Oo
I know it would be a silly mistake, but can someone help me?
Thanks
======
Updated
In the end, did some tests and discovered that I could manipulate the data inside of the function, instead of manipulating it on the NgOnInit
final answer it became like this:
getVideo() {
this.watchService.getVideoByVideoString(this.videoId).subscribe(
(Response) => {
this.videoData = Response;
if (this.videoData.title == null) {
this.titleService.setTitle('InternalVideoChannel');
} else {
this.titleService.setTitle('InternalVideoChannel - ' + this.videoData.title);
}
if (this.videoData.id == 0) {
console.log('Video doesnt exist on the database');
this.router.navigate(['/notFound']);
}
console.log(Response);
},
(err) => console.log(err)
);
}
Thanks !
The correct syntax is
getVideo() {
this.watchService.getVideoByVideoString(this.videoId).subscribe(
(Response) => {
this.videoData = Response;
console.log(Response);
},
(err) => console.log(err);
);
}
Well i think i would need a little bit of more context, the situation is that if you have console log before the subscription happens and the value gets assigned to the variable you'll always get undefined as the value for this.videoData.
if you only want to see if the value was assigned to the property this.videoData of you class the console.log has to be along side the assignation on the subscription.
note: be aware of any memory leaks caused by not unsubscribing from a observable.
edit: as we you can see the console.log is out of the subscription scope, this means that you will be getting undefined, an observable subscription is by nature async
ngOnInit():void {
console.log(this.videoData) <- this will be undefined
this.getVideo(); // <- async
console.log(this.videoData) <- this will be undefined
}
the only way you can get the value is to console.log inside of the subscription hook like this:
getVideo() {
this.watchService.getVideoByVideoString(this.videoId).subscribe(
(Response) => {
this.videoData = Response;
console.log(Response);
console.log(this.videoData); // your console.log
},
(err) => console.log(err)
);
The issue is the actual behavior of a observable, and observable behaves like a promise, so once you run the code the console.log is gonna run before the actual assignation happens, if you want to see the stored value on the "this.videoData" property you may have a function and bind that function to a click event or something like that or just add the console.log inside of the subscription.
Third edit. Well if you want to access the value there isn't a solution that i know of but; if you want to access the value on a specific point of time in your application.
the approach would be to create a function that you would call manually each time you want to see the value, maybe a timeout, maybe on a click event that's up to you.
logVideoDataValue():void {
console.log(this.videoData)
}