Javascript, calling function within promise

Question

Explanation of code

I have a function called placeDecode which takes an HTML input element. Within the function I have a promise which converts input value into a formatted address.

I called placeDecode twice, to check when both called have been resolved I use a Promise.all, checking both each function call. My problem arises when I try to call a function viewResult, I get Cannot read property 'viewresult' of undefined error.

Code

  //call function twice
    var startAddress = this.placeDecode1(this.searches.startSearch);
    var endAddress = this.placeDecode1(this.searches.endSearch);
  
    //promise all
    Promise.all([endAddress,startAddress]).then(function(values) {
      this.viewResult(values);

    }).catch(function(result){
      console.log(result);
    })

    console.log('hit');
  }


  //method convertes input into formatted address
  private placeDecode1(input: HTMLInputElement) {

    var result = new Promise(function(resolve, reject) {
      var location = input.value;

      var geoCode = new google.maps.Geocoder();
      geoCode.geocode({
        address: location
      }, function(result,status){
        if(status == 'OK'){
          console.log(result[0].formatted_address);
          resolve(result[0].formatted_address);
        }
      })
    });

    return result;

  }

Problem

The problem I am having is when i call this.viewResult(values); , I get an

Cannot read property 'viewResult' of undefined Error.

many thanks

`this` is not what you think it is ... use arrow functions or bind required `this` as appropriate — Jaromanda X, Jan 23 '18 at 23:17
the use of `.then(function(...` is the issue. The `function` keyword introduces a new `this` context. Use an arrow function: `.then((values) => {...` — CRice, Jan 23 '18 at 23:17
cheers much appreciated, am i right in saying the function keyword takes the viewresults out of scope — Yusof Bandar, Jan 23 '18 at 23:25
Also what do you think about the approach i am taking is it the best way — Yusof Bandar, Jan 23 '18 at 23:25

score 10 · Answer 1 · answered Jan 23 '18 at 23:18

10

Change:

function(values) {
  this.viewResult(values);
}

To:

(values) => {
  this.viewResult(values);
}

More

Arrow functions bind this based on outer scope.

answered Jan 23 '18 at 23:18

basarat

261,912
58
460
511

Javascript, calling function within promise

Explanation of code

Code

Problem

1 Answers1

More