Why is my variable undefined in the controller?

Question

Here is my controller code, As soon as the function init() runs, it returns undefined for this.customers.

myApp.controller('OrdersController',['$routeParams', function ($routeParams) {
var customerId = $routeParams.customerId;
this.orders = null;


this.customers = [
    {joined: '2012-12-03', name: 'Amit', city: 'Delhi', orderTotal: 34.53,orders: [{id:1,product:'shoes',total:'34.53'}]},
    {joined: '1995-04-24', name: 'Ravi', city: 'Mumbai',orderTotal: 45.34,orders: [{id:2,product:'socks',total:'53.51'}]},
    {joined: '2003-03-21', name: 'Flish', city: 'Lonavla', orderTotal: 134.323,orders: [{id:3,product:'books',total:'43.55'}]},
    {joined: '2003-10-14', name: 'Meahe', city: 'Pune', orderTotal: 12.33,orders: [{id:4,product:'eraser',total:'12.33'}]}
];

function init() {
    console.log('infunc',this.customers);
    //search the customers for customerId
    for(var i=0; i < this.customers.length; i++){
        if(this.customers[i].orders[0].id === parseInt(customerId)) {
            this.orders = this.customers[i].orders;
        }
    }
}

init();

}]);

avoid using this instead use var customer or $scope.customer — Abdullah Al Noman, Mar 06 '17 at 05:56

score 0 · Answer 1 · edited May 23 '17 at 12:00

Your question is basically answered by this SO question, which explains that this and $scope are not necessarily the same thing. When the controller is created, this is the controller, and so is $scope. But when the function init() actually gets evaluated, there is no guarantee that this has the same meaning as $scope. In any case, data stored using this will not be available to any view, rather only things stored to $scope will be available. So for so many reasons, you should change your code to:

myApp.controller('OrdersController',['$routeParams', function ($routeParams) {
    var customerId = $routeParams.customerId;
    $scope.orders = null;

    $scope.customers = [
        {joined: '2012-12-03', name: 'Amit', city: 'Delhi', orderTotal: 34.53,orders: [{id:1,product:'shoes',total:'34.53'}]},
        {joined: '1995-04-24', name: 'Ravi', city: 'Mumbai',orderTotal: 45.34,orders: [{id:2,product:'socks',total:'53.51'}]},
        {joined: '2003-03-21', name: 'Flish', city: 'Lonavla', orderTotal: 134.323,orders: [{id:3,product:'books',total:'43.55'}]},
        {joined: '2003-10-14', name: 'Meahe', city: 'Pune', orderTotal: 12.33,orders: [{id:4,product:'eraser',total:'12.33'}]}
    ];

    function init() {
        console.log('infunc',this.customers);
        for (var i=0; i < this.customers.length; i++) {
            if ($scope.customers[i].orders[0].id === parseInt(customerId)) {
                $scope.orders = $scope.customers[i].orders;
            }
        }
    }

    init();
}]);

score 0 · Accepted Answer · answered Mar 06 '17 at 05:35

It's better define var vm = this then use instead of this.

myApp.controller('OrdersController',['$routeParams', function ($routeParams)        {
var vm = this; 
var customerId = $routeParams.customerId;
vm.orders = null;

vm.customers = [
    {joined: '2012-12-03', name: 'Amit', city: 'Delhi', orderTotal: 34.53,orders: [{id:1,product:'shoes',total:'34.53'}]},
    {joined: '1995-04-24', name: 'Ravi', city: 'Mumbai',orderTotal: 45.34,orders: [{id:2,product:'socks',total:'53.51'}]},
    {joined: '2003-03-21', name: 'Flish', city: 'Lonavla', orderTotal: 134.323,orders: [{id:3,product:'books',total:'43.55'}]},
    {joined: '2003-10-14', name: 'Meahe', city: 'Pune', orderTotal: 12.33,orders: [{id:4,product:'eraser',total:'12.33'}]}
];

function init() {
    console.log('infunc',vm.customers);
    for (var i=0; i < vm.customers.length; i++) {
        if ($scope.customers[i].orders[0].id === parseInt(customerId)) {
            vm.orders = vm.customers[i].orders;
        }
    }
 }

  init();
}]);

score 0 · Answer 3 · answered Mar 06 '17 at 05:37

@Tim Biegeleisen and hadiJz's responses were very helpful and contain everything you need to know, but I was in the process of responding with a general Javascript explanation and wanted to include it. This simplified excerpt has helped me with this when convoluted by elements of Angular:

Regarding Javscript in general, this can be bound in three different ways. this is bound in the local scope of the invoked function (it is not a property of an object). If a function is invoked normally (e.g., f()), then 'this' points to the global object. If a function is invoked as a constructor (i.e., as part of 'new'), then 'this' points to the newly created object. The last case for this is a method invocation (e.g., a.f()), where 'this' will point to the object that results from evaluating the left of the dot.

I'm not trying to steal the answer and you should definitely choose Tim or hadiJz's, but this may help you understand elements of their responses.

Why is my variable undefined in the controller?

3 Answers3