Angular HTTP Post - Unable to access returned value

Question

For my project, I am making an Angular frontend within which numerous HTTP POST requests will be made, with data being passed to the backend and the backend then returning data as a confirmation. I've gotten the first part working, with the backend receiving the data, but as soon as I try to access the data returned I keep finding that the variable I am passing the data to is returning 'Undefined'. I've used Postman to confirm that the backend is receiving and returning data correctly so the frontend is the likely culprit. My code follows as:

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);
  }

Method 2 is called first when my HTML submit button is pressed which then calls Method 1, which actually makes the POST request and returns the observable value. I want the data returned by my web service to be assigned to "result" so I can view it but it keeps returning 'undefined'.

score 2 · Answer 1 · answered Jan 12 '20 at 21:53

The issue here is with the understanding of how asynchronous code works, especially in JS/TS. Your console lines are run before anything is returned, as the subscription has not yet yielded anything. I strongly advise looking at how asynchronous code works in Web development, but here's a temporary solution for you:

this.onSubmitP1().subscribe((data) => {
  this.result = data;
  // handle result stuff here
});

score 1 · Answer 2 · answered Jan 12 '20 at 21:51

You can't access because it's async call. It like knowing the future ;) The subscribed function will be called after the result is ready from the server. And as it's an async call, the code you wrote will occure before and then the function will end.

score 1 · Accepted Answer · answered Jan 12 '20 at 21:54

try the same in this way

onSubmitP2()
  {
    this.onSubmitP1().subscribe((data) => {
     this.result = data

     console.log(this.result);
     console.dir(this.result);
    });

  }

i placed console.logs into the callback that is called AFTER the result has arrived. in your version logs are called just after the call is initiated, not finished. that happends because of async JS conceps

score 1 · Answer 4 · answered Jan 12 '20 at 21:56

Your onSubmitP2() is subscribing to the onSubmitP1() method, so you are setting the this.result = data at the end of the Async call (Basicaly at the end of the Http request), but you are writing to the console just immediately. Change your subscription:

onSubmitP2()
  {
    this.onSubmitP1().subscribe((data) => { 

       this.result = data;

       console.log(this.result);
       console.dir(this.result);

    });
  }

Angular HTTP Post - Unable to access returned value

4 Answers4