How can I handle an Angular promise in the controller using TypeScript

Question

I have a Service that makes a request for some data:

/// <reference path="../../typings/reference.ts" />

module app {
'use strict';

export class VehicleMakeService {

    static $inject = ['$http'];
    constructor(private $http: ng.IHttpService) {}

    getVehicles(): ng.IPromise<any> {

        return this.$http.get('https://api.edmunds.com/api/vehicle/v2/makes?state=used&year=2015&view=basic&fmt=json')
        .then(function(response) {
            return response.data;
        });
    }
}

angular.module('app').service('VehicleMakeService', VehicleMakeService);
}

This works as expected, however when I attempt to retrieve the data in the controller I get 'Promise {$$state: object}'.

Here is the controller:

/// <reference path="../../typings/reference.ts" />

module app {
'use strict';

interface ISearchController {
    vehicles: any;
    setVehicles(): void;
}

class SearchController implements ISearchController {

    vehicles: any;

    static $inject = ['VehicleMakeService'];
    constructor(private vehicleMakeService: VehicleMakeService) {
        this.vehicles = {};
        this.setVehicles();     
    }

    setVehicles(): void {
        this.vehicles = this.vehicleMakeService.getVehicles();
        console.log(this.vehicles); 
    }
}
angular.module('app').controller('SearchController', SearchController);
}

I tried resolving it in the controller:

setVehicles(): void {
        this.vehicleMakeService.getVehicles().then(function(data) {
            this.vehicles = data;
            console.log(this.vehicles);
        });
    }

But then I get 'TypeError: Cannot set property 'vehicles' of undefined'.

I normally handle this kind of thing in the resolve function in the module config but I can't on this occasion.

b091 · Accepted Answer · 2015-10-10 19:20:47Z

4

You can also use arrow function from TS/ES6 like this:

setVehicles(): void {
    this.vehicleMakeService.getVehicles().then((data) => {
        this.vehicles = data;
        console.log(this.vehicles);
    });
}

btw. you shouldn't use internal modules in TS its so bad ;)

you can check my example skeleton application with external modules Angular 1.x and TypeScript here.

edited Oct 10, 2015 at 19:20

answered Oct 10, 2015 at 12:30

b091

5392 silver badges8 bronze badges

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

2 Comments

dfsq Over a year ago

By the way, totally forgot that we are in ES6 environment!

SquarePeg Over a year ago

Yes. This works also and is a little cleaner. Thanks.

dfsq · Accepted Answer · 2015-10-10 11:42:49Z

1

Since getVehicles method returns promise object you need to use it properly and never forget about asynchronousy of HTTP requests. Also context of the callback in then will be different so you also need to take of it, for example with bind method:

setVehicles(): void {
    this.vehicleMakeService.getVehicles().then(function(data) {
        this.vehicles = data;
        console.log(this.vehicles);
    }.bind(this));
}

answered Oct 10, 2015 at 11:42

dfsq

193k26 gold badges244 silver badges261 bronze badges

2 Comments

SquarePeg Over a year ago

Yes this works. Great work. I've never seen .bind(this) before. I'm sure I will be use it again. Thanks again.

dfsq Over a year ago

@user3654179 Take a look at b091's answer, I would suggest using arrow function, totally forgot that you are in TS.

Collectives™ on Stack Overflow

How can I handle an Angular promise in the controller using TypeScript

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related