angular 4 function undefined when nested in http request

Question

I am new to angular and trying to learn quickly but I am stumped as to what is happening. When my TS file is loaded, it gets a list of messages from a http.get request and stores them int he variable conversation. However, when I add a new message, it is making it to my API and returning a result, but when I try to add the message to the conversation, I get the error

this.insertMessage is undefined

But the function is set. See code below. I assume that when you are trying to call a function within the complete function in the .subscribe method, you cannot access external functions. Is that correct?

export class MessagePage {

  newmessage;
  conversation;

  id;
  response: {};

  ionViewWillEnter(){
    this.getMessage(this.id);
  }

  // public messageArr;
  constructor(public navCtrl: NavController, public navParams: NavParams, public messageService: MessagesProvider) {
    this.id = navParams.get('id');
  }

  addmessage(): void {
    this.messageService.addMessage(this.newmessage,this.id)
      .subscribe( 
        function(response) { console.log("Success Response" + response); this.response = response;},
        function(error) { console.log("Error happened" + error)},
        function() {     
          if(this.response.result == 200) this.insertMessage(this.response.response.message);
          else console.error(this.response);
        }
      );
  }

  getMessage(id: number): void {
    this.messageService.getMessage(id)
      .subscribe(message => this.conversation = message);
  }

  insertMessage(message): void {
    console.log('conversation:'+ this.conversation);
    this.conversation.push(message);
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad MessagePage');
  }

}

https://stackoverflow.com/questions/45566506/rxjs-why-is-this-undefined-within-subscribe — Gvs Akhil, Oct 12 '18 at 16:01

SiddAjmera · Accepted Answer · 2018-10-12T19:58:46.313

Use the more modern arrow functions(() => {}) syntax instead of the old normal functions syntax(function () {}) to retain the scope of this.

Since the scope of this changed in your callback function, this was not referring to your MessagePage anymore.

Using the arrow functions(() => {}) syntax will retain the scope of this.

Use this for the fix:

addmessage(): void {
  this.messageService.addMessage(this.newmessage, this.id)
    .subscribe(
      response => this.response = response,
      error => console.log("Error happened" + error),
      () => {
        if (this.response.result == 200) 
          this.insertMessage(this.response.response.message);
        else console.error(this.response);
      }
    );
}

It's not an hack In ECMAScript 3/5, the this issue was fixable by assigning the value in this to a variable. — Jameel Moideen, Oct 12 '18 at 19:53

Jameel Moideen · Answer 2 · 2018-10-12T16:10:42.567

You can simply access the the outer scope of this like below

  addmessage(): void {
     var self=this;

    this.messageService.addMessage(this.newmessage,this.id)
      .subscribe( 
        function(response) { console.log("Success Response" + response); this.response = response;},
        function(error) { console.log("Error happened" + error)},
        function() {     
          if(this.response.result == 200) self.insertMessage(this.response.response.message);
          else console.error(this.response);
        }
      );
  }

angular 4 function undefined when nested in http request

2 Answers2

Related