ES6 and variable scope inside a promise

Question

Not sure what I\'m missing here.

I need to get the output of data into this.contact. Right now, I\'m using a static class variable, but it

Answer 1

You need to do two things. First, use an arrow function, and second, use `this.contact = data;

activate(id) {
  this.id = id;
  return dpd.contacts.get(id).then(data => {
    console.log(data);
    this.contact = data;
  });
}

You use an arrow function because it deals with JavaScript's "this" issue, where this refers to the lexical scope of the function, and not the object you're currently in. Using an arrow function makes sure that this outside the arrow function is the same as this inside the arrow function.

You need to use this.contact because contact is an instance property of the class.

Answer 2

The problem is that contact = data; will update the value of the local contact variable, but will not change the value of the this.contact. You need to update the contact contact property instead. The problem is that you do not have access to this inside the body of your anonymous function (or rather, the this of the anonymous function is not going to be the same this as activate's).

There is different ways to solve this.

1- You can save activate's context (this) into a variable in the closure of activate so that you can access it inside the core of then.

activate(id) {
    this.id = id;
    let that = this;
    return dpd.contacts.get(id).then(function(data) {
      console.log(data);
      that.contact = data;
    });
  }

2- You can bind the function to activate's this so that it is called with the same context.

activate(id) {
    this.id = id;
    return dpd.contacts.get(id).then(function(data) {
      console.log(data);
      this.contact = data;
    }.bind(this));
  }

3- (recommended with ES6) you can use an arrow function (arrow functions do not have their own context, so they preserve the one where they are created)

activate(id) {
    this.id = id;
    return dpd.contacts.get(id).then((data) => {
      console.log(data);
      this.contact = data;
    });
  }