0

I have an instance of Organisation which initialises with an id:null. In the following code, I detect this condition to determine whether to call create or update on a service:

private saveOrganisation() {
  console.log('1 ' + JSON.stringify(this.organisation));

  if (this.organisation.id === null) {
    // we are creating a new one
    this.organisationService.create(this.organisation).subscribe(res => {
      console.log('2 ' + res);
      console.log('3 ' + JSON.stringify(this.organisation));
      return this.organisation = res;
    });
   } else {
     this.organisationService.update(this.organisation).subscribe(res => {return this.organisation = res;});
   }
     console.log('4 ' + JSON.stringify(this.organisation));
}

I have this instance as a member variable referenced by "this.organisation" in the body of the subscription, i set "this.organisation" with the response.

  1. The first console log shows this.organisation id : null (as expected)
  2. The second console log shows res id : 1 (as expected)
  3. The third console log shows this.organisation id : 1 (as expected)
  4. The fourth console log shows this.organisation id : null (not expected)

The fourth console.log fires before 2 and 3, while I know that subscribe is asynchronous, i am finding that although I see 2 and 3 in the logs, the id is still never updated, subsequent calls to saveOrganisation() show the null value that I get in 4 (in 1 and 2). I am wondering if this.organisation ever updates.

Can anyone tell me what's going on?

Michael Coxon
  • 3,337
  • 8
  • 46
  • 68
  • 2
    `subscribe` is asynchronous. The call back fires *after* your 4th console (as sequenced in the code top to bottom : `console.log(JSON.stringify(this.organisation));`) has executed. – Igor Mar 06 '18 at 21:33
  • If that is not your question then please update it and prefix your `console.log` with a unique string like `console.log('1. ` + res);` so you can see in the log which console is fired and also rephrase your question about which log you have a question about. – Igor Mar 06 '18 at 21:36
  • I have updated the question as you suggested. I did see that 4 is played before 2 and 3, but the real problem is that on subsequent calls this.organisation.id is still null, so i am thinking that all the updates are just in the subscriber and never really make it out. If so, how do I make them come out. – Michael Coxon Mar 06 '18 at 22:05
  • `The fourth console log shows this.organisation id : null (not expected)` <= For clarification you are referring to the last line that starts `console.log('4 ' + ....`, is that correct? – Igor Mar 06 '18 at 22:09
  • yes, that is correct – Michael Coxon Mar 06 '18 at 22:10
  • After subsequent calls of what? If this whole code is in a method that you call, and if you expect it to return the updated organization, it won't. The `return` you have there return from the callback functions passed to subscribe(), not from the method. There's a reason the service returns an Observable, and not a value: it's the only way to return a future, asynchronous result. – JB Nizet Mar 06 '18 at 22:10
  • Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – Igor Mar 06 '18 at 22:11
  • See the proposed duplicate. There are some excellent answers here that should help you better understand how asynchronous code works in javascript / TypeScript. In a nutshell the code that is found inside the `subscribe` block won't be executed until a response is received from the server *but* javascript execution engine will continue executing that code file, it will not wait on that call back (nor would you want it to). So the 4th console log will execute before 2 and 3 which won't be called until a response is received from the server. – Igor Mar 06 '18 at 22:12
  • Possible duplicate of [How do I return the response from an Observable/http/async call in angular2?](https://stackoverflow.com/questions/43055706) – Igor Mar 06 '18 at 22:19
  • @JBNizet yes, the whole code is in a method, which i have called. Then I have called the method a second time, and still no update. On entry into the method a second time, comment 1 still shows id : null – Michael Coxon Mar 06 '18 at 23:32

0 Answers0