Why is the 'this' not able to resolve within the service in AngularJS?

Question

I am using ES6 with Babble for constructing an angular app using angular1.x. There is a variable in the controller which is not resolved when I call a Service using Ajax.

Controller

    export default class MenuController {
    constructor(MenuService) {
        this.Items=[];
        this.MenuService = MenuService;
    }

    getMenu() {
        this.MenuService.getMenuItems().then(function(data) {
            this.Items = data
        });
        console.log(this.Items)
    }
}

MenuController.$inject = ['MenuService'];

Service

    class MenuService {
    constructor($http) {
        this.$http = $http;
    }

    getMenuItems() {
        var promise = null;
        if (!promise) {
            promise = this.$http.get('./data/menu-config.json').then(function(response) {
                return response.data;
            });
        }
        return promise;
    }
}

    MenuService.$inject = ['$http'];

    export default angular.module('services.menu-service', [])
        .service('MenuService', MenuService)
        .name;

Now whenever this code is executed I get the following error on the browser console.

TypeError: Cannot set property 'Items' of undefined
    at eval (menu.ctrl.js:23)
    at processQueue (angular.js:14792)
    at eval (angular.js:14808)
    at Scope.$eval (angular.js:16052)
    at Scope.$digest (angular.js:15870)
    at Scope.scopePrototype.$digest (hint.js:1972)
    at Scope.$apply (angular.js:16160)
    at Scope.scopePrototype.$apply (hint.js:2035)
    at done (angular.js:10589)
    at completeRequest (angular.js:10787)(anonymous function) @ angular.js:12520(anonymous function) @ angular.js:9292processQueue @ angular.js:14800(anonymous function) @ angular.js:14808Scope.$eval @ angular.js:16052Scope.$digest @ angular.js:15870scopePrototype.$digest @ hint.js:1972Scope.$apply @ angular.js:16160scopePrototype.$apply @ hint.js:2035done @ angular.js:10589completeRequest @ angular.js:10787requestLoaded @ angular.js:10728

I am not able to rectify this. Whereas I know that there is some referential error. Please help

use arrow function [`() => {}`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) instead of `function` — Hacketo, Jan 21 '16 at 10:51
I dont think that is the problem because Bable is backward compatible and the script generated is pretty fine! — Shiv Kumar Ganesh, Jan 21 '16 at 10:52
@ParthTrivedi I guess babel will do the job, it's es6. I linked mdn doc you can see browsers support — Hacketo, Jan 21 '16 at 10:52
@Hacketo arrow function won't help in this case. The problem is in worng context. — Manasov Daniel, Jan 21 '16 at 10:55
@Hacketo Yes you are so correct. it works, this is the generated ` var _this = this; var that = this; this.MenuService.getMenuItems().then(function (data) { return _this.Items = data; });` is what is generates, same as @pixelbits mentioned!!! Thanks — Shiv Kumar Ganesh, Jan 21 '16 at 10:57

score 8 · Accepted Answer · answered Jan 21 '16 at 10:52

8

this depends on the function context.

Save this in that:

 var that = this;
 this.MenuService.getMenuItems().then(function(data) {
        that.Items = data
 });

As mentioned in comments, you can use arrow syntax instead:

 this.MenuService.getMenuItems().then(data=>this.Items = data);

answered Jan 21 '16 at 10:52

Michael Kang

52,003
16
103
135

Thanks a lot. I get that Bable generates this out. You got the correct one. – Shiv Kumar Ganesh Jan 21 '16 at 10:58

Why is the 'this' not able to resolve within the service in AngularJS?

1 Answers1