Attempting to retrieve data from an API using a service and then logging it within a module that will later display it in a list. The variable appears in the console.log in the service, but not when attempting to log it in the module
I have used this same setup with Ionic before and assumed Angular would function similarly, but that seems not to be the case here. I have already added error handling to the .subscribe function, yet no errors are being displayed. I am at a loss as to where to troubleshoot next.
api.service.ts
getPlacesData(): any {
let result = this.http.get(`${this.apiUrl}/places`, this.httpOptions).pipe(
map(response => {
console.log(response['data']);
response['data'];
})
);
return result;
}
}
test-dashboard.component.ts
constructor(private breakpointObserver: BreakpointObserver, private apiService: ApiService) {}
getPlacesData() {
this.apiService.getPlacesData().subscribe(
(placesData: Observable<any>) => {
console.log(placesData);
this.placesData = placesData;
console.log(this.placesData);
},
(error: string) => {
console.log('Received an errror: ' + error);
}
);
}
ngOnInit() {
this.getPlacesData();
}
}
Expecting the second and third console.log statements to output the same as the first one, but instead of the desired array:
(15) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]