I've been working on a web project using Angular, and I've run into an issue with my code that's been causing problems for a while now. The problem lies in fetching data from a server that contains translations:
getTranslations(): Observable<Translation[]> {
return this.http.get(`${this.baseUrl}/getAllTranslations.php`).pipe(
map((res: any) => {
return res['data'];
})
);
}
To fetch the data on the client side, I have the following implementation:
//Variables
translations?: Translation[];
constructor(private translationService: TranslationsService) { }
ngOnInit(): void {
this.getTranslations();
}
getTranslations(): void {
this.translationService.getTranslations().subscribe((data: Translation[]) => {
this.translations = data;
console.log(this.translations);
});
console.log(this.translations);
}
When printing the results of the translations inside the subscribe function, the data is shown correctly. However, the second console.log statement displays an empty list of Translations, leading to confusion about the root cause of the issue. Can anyone provide assistance? The first log output looks like this:
0
:
{id: '1', title: 'Franco. Unidos en la distancia'}
1
:
{id: '4', title: 'La amiga'}
While the second log shows undefined. Thank you in advance for your help!