Currently, I am facing an issue with passing the response from an http.post call in my TypeScript service component to an Angular 2 component for display on the frontend. Below are the code structures of my service.ts and component.ts:
getSearchProfileResponse(body) {
let headers = new Headers({'Content-Type': 'application/json'});
let options = new RequestOptions({headers: headers});
return this.http.post(this._url, body, options)
.map((response:Response) => {
console.log(JSON.stringify(response));
JSON.stringify(response);
})
.catch((error) => {
console.log("error is "+ error);
return Observable.throw(error);
});
}
getProfile() {
this.spinnerService.show();
this.searchProfileRequest = _.cloneDeep(this.searchKey);
this.searchProfileService.getSearchProfileResponse(this.searchProfileRequest)
.subscribe(
searchProfileResponse => {
this.searchResult = searchProfileResponse;
console.log("response in component is "+ searchProfileResponse); // this is displayed as undefined
console.log("search result is "+ this.searchResult);
this.spinnerService.hide();
this.showProfiles(this.searchResult);
},
error => {
console.log(error);
this.spinnerService.hide();
this.showError();
}
);
}
I have noticed that data is being passed correctly in the response within the getSearchProfileResponse(body) method. However, in the getProfile() method's response, it appears as "undefined". Any help or suggestions would be greatly appreciated!