Typescript: Assign value to variable from Async function

Question

using Typescript am I trying to assign the return value from an async service call to a local variable as so;

private searchResult;

public search():void{
             this.DashboardService.dashboardSearch(this.searchParams)
                .then(
                    function (result:ISearchResult) {
                        // promise was fullfilled
                        console.log(result);
                        this.searchResult = result;
                    },
                    function (error) {
                        // handle errors here
                        console.log(error);
                    }
                );
        };

<div id="dashboard-content" ng-controller="dashboardCtrl as vm">
    <h3>{{vm.searchResult}}</h3>
</div>

The dashboardSearch service correctly returns an object with data. But i'm unable to assign the data to my local variable.

here is the error + data from Google Chrome console.log

How do I bind the data from my service to my local class variable ?

It has to do with the `this` keyword. There is a previous answer on SO which is very well written on how `this` works and how to always refer to the correct `this` instance. http://stackoverflow.com/a/20279485/1260204 — Igor, Feb 04 '16 at 13:21

score 3 · Accepted Answer · answered Feb 04 '16 at 13:18

private searchResult;

public search():void {
  let that = this;
  
  this.DashboardService.dashboardSearch(this.searchParams)
  .then(function(result:ISearchResult) {
    // promise was fullfilled
    console.log(result);
    that.searchResult = result;
  }, function (error) {
    // handle errors here
    console.log(error);
  });
};

Typescript: Assign value to variable from Async function

1 Answers1