My current project involves developing an Angular frontend that will handle multiple HTTP POST requests. The data is sent to the backend, which then responds with a confirmation. While the first part of the process is working smoothly, I'm encountering an issue when trying to access the returned data. Despite confirming that the backend is functioning correctly using Postman, I keep encountering 'Undefined' when trying to assign the data to a variable on the frontend. Here is a snippet of my code:
Method 1:
onSubmitP1()
{
const formData = new FormData();
formData.append('data_selection', this.SearchDataForm.get('dataselection').value);
console.dir(this.SearchDataForm.get('dataselection').value);
let headerOptions = new HttpHeaders();
headerOptions.append('Content-Type', 'application/text; charset=UTF-8');
return this.httpClient.post(this.SERVER_URL, formData, {headers: headerOptions});
}
Method 2:
onSubmitP2()
{
this.onSubmitP1().subscribe((data) => this.result = data);
console.log(this.result);
console.dir(this.result);
}
When the HTML submit button is pressed, Method 2 is called first, which in turn triggers Method 1 to make the POST request and return the observable value. The goal is to assign the data returned by the web service to the variable "result" for viewing, but the value keeps returning as 'undefined'.