Calling a function from another function in typescript

Question

I have called a function on ngOnInit() and now I am trying to call another function from the previous function but I am not able to get the results from second function

ngOnInit() {
    this.mapsAPILoader.load().then(() => {
        let autocomplete = new google.maps.places.Autocomplete(this.searchElement.nativeElement, {types: ['address']});
        autocomplete.addListener('place_changed', () => {
            this.ngZone.run(() => {
                let place: google.maps.places.PlaceResult = autocomplete.getPlace();
                if (place.geometry === undefined || place.geometry === null) {
                    return;
                }
                this.codeAddress(place.formatted_address, 'pickup');
            });
        });
    });
}

codeAddress(address: string, type) {
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({'address': address}, (results, status) => {
        if (status == google.maps.GeocoderStatus.OK) {
            this.getdistance();
        } else {
            alert('Request failed.');
        }
    });
}

getdistance() {
    console.log('get distance called');
}

Here in the code I am trying to call the getdistance() function from codeaddress() function. But it give me the error that this.getdistance() is not a function

Your code looks well . This is one the way to call the function . — Pushprajsinh Chudasama
– Pushprajsinh Chudasama, Commented Sep 10, 2019 at 5:31

qorsmond · Accepted Answer · 2019-09-10 05:58:20Z

2

You are trying to access this from within the callback you can use function(){}.bind(this) to make the function use the correct context, or use an ES6 arrow function.

geocoder.geocode({ 'address': address }, (results, status) => {
    if (status == google.maps.GeocoderStatus.OK) {
        this.getdistance();
    }
    else {
        alert("Request failed.");
    }
});

edited Sep 10, 2019 at 5:58

answered Sep 10, 2019 at 5:33

qorsmond

1,2461 gold badge18 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lahiru Chandima · Accepted Answer · 2019-09-10 05:33:23Z

2

Use an arrow function instead of function to use this pointer inside of it.

codeAddress(address: string, type) {
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({'address': address}, (results, status) => {
        if (status == google.maps.GeocoderStatus.OK) {
            this.getdistance();
        } else {
            alert('Request failed.');
        }
    });
}

answered Sep 10, 2019 at 5:33

Lahiru Chandima

24.4k26 gold badges116 silver badges201 bronze badges

Comments

Tobin · Accepted Answer · 2019-09-10 05:33:37Z

0

Answer pre-pending edit;

It's because you have a callback function with function(){..} instead of () => {..}. Thus your this is referring to the context of the inside of the function not the full class this scope.

Either change to an arrow function, or explicitly set this in the function:

var self = this
function(){
   this.getDistance()
}

answered Sep 10, 2019 at 5:33

Tobin

2,0572 gold badges19 silver badges26 bronze badges

Comments

Ganesh · Accepted Answer · 2019-09-10 05:40:31Z

context of this is changed when you have goes into the function , So do something like below otherwise use Arrow functions of ES6

codeAddress(address: string,type) {
     const self = this;
     var geocoder = new google.maps.Geocoder();
     geocoder.geocode({ 'address': address }, function (results, status) {
           if (status == google.maps.GeocoderStatus.OK) {
              self.getdistance();
           } else {
              alert("Request failed.");
           }
       });
  }

Collectives™ on Stack Overflow

Calling a function from another function in typescript

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related