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 seems dirty to have to do that.

export class contactEdit {
  static t; // static class var
  constructor() {
    this.id = null;
    this.contact = null;
    contactEdit.t = this;
  }

  activate(id) {
    this.id = id;
    let contact = this.contact; // scoped version of class var
    return dpd.contacts.get(id).then(function(data) {
      console.log(data);
      contactEdit.t.contact = data; // this works
      contact = data; // this doesn't
    });
  }
}

Normally I would create a var contact inside the activate() function (it works in the Chrome console) but this doesn't seem to working in ES6.

Chrome console:

var c = null;
undefined
c;
null
dpd.contacts.get('a415fdc8f5a7184d').then(function(data) {
      c = data;
    });
Object {}fail: (n)then: (e,t)__proto__: Object
c;
Object {firstName: "John", lastName: "Doe", id: "a415fdc8f5a7184d"}

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 core of your function.

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 this so you can access it.

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 preserve the context)

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