1

I'm working in an Angular app and inside a controller I need to iterate over an array of objects. This is the controller and the code involved in this situation:

myapp.controller('LoginController', ['$scope',  function(scope) {
    // Users for test
    this.users = [
        {
            name: 'admin',
            password: 'admin',
            role: 'ADMIN'
        },
        {
            name: 'employee',
            password: '12345',
            role: 'EMPLOYEE'
        }
    ];
    console.dir(this.users); // Prints an array of objects correctly

    // called when user submits
    scope.login = function() {
        console.log('login(). User: ');
        console.dir(scope.user); // Prints the object with user's input (also correct)

        var found = false;

        for(let u of this.users) {
            console.log('Comparing with:');
            console.dir(u);

            if(u.name == scope.user.name && u.password == scope.user.password) {
                console.log('Found!');
                found = true;

                // do something else...
            }
        }

        if(!found) { // show error message... }
    }
}]);

The problem is that when I submit the login form (call to scope.login()) I get an error message in the console:

TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined
    at m.scope.login (loginController.js:44)
    ...

loginController.js:44 corresponds to for(let u of this.users) { line. I searched through the web (W3 Schools, MDN and this site also) but the solutions didn't worked for me. I already tried the following solutions:

  • for(var u of this.users)
  • var u; for(u in this.users)
  • for(var i = 0; i < this.users.lenght; i++): This changes the error message to Cannot read property 'length' of undefined

I'm feeling that it's something simple but I cant't figure out what it is (I'm not very skilled in Javascript, sorry). Can anyone help me with this issue?

Thanks in advance for your answers.

Improve this question
3
  • Is this.users undefined? Commented May 31, 2017 at 19:39
  • 2
    Why are you using this? Should you not use scope or just a normal var or let? Because when you get to the function, this refers to the function Commented May 31, 2017 at 19:40
  • 1
    @Chifilly It's controller as syntax. It is preferred in favor of $scope Commented May 31, 2017 at 19:42

2 Answers 2

Reset to default
2

The scope is changing within the login function, so the variable this isn't the same before as it is within that function.

Before scope.login = function() { you can write:

var _this = this;

then use _this.users.forEach(function(user) {

or for (var i = 0; i < _this.users.length; i++)

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

1 Comment

I'll take your answer as correct, I used var users = [...] so I can use it throughout the controller and worked perfectly. Thank you so much
1

The this context changes inside your scope.login = function () {}, as it's an object method, this is a reference to scope. try this:

myapp.controller('LoginController', ['$scope',  function(scope) {
    var that = this; // reference to the correct this context
    // Users for test
    this.users = [
        {
            name: 'admin',
            password: 'admin',
            role: 'ADMIN'
        },
        {
            name: 'employee',
            password: '12345',
            role: 'EMPLOYEE'
        }
    ];
    console.dir(this.users); // Prints an array of objects correctly

    // called when user submits
    scope.login = function() {
        console.log('login(). User: ');
        console.dir(scope.user); // Prints the object with user's input (also correct)

        var found = false;
        for(let u of that.users) { // use the correct context here
            console.log('Comparing with:');
            console.dir(u);

            if(u.name == scope.user.name && u.password == scope.user.password) {
                console.log('Found!');
                found = true;

                // do something else...
            }
        }

        if(!found) { // show error message... }
    }
}]);
Improve this answer

5 Comments

You could also just change this.users to scope.users and everything will work as expected.
It's worth noting that that != $scope, the difference won't be immediately noticeable in the controller, but will be on the HTML, also using this opposed to $scope is fairly opinion based, I believe a reason to use this would be to force dot notation when referencing it in the HTML with the Controller as syntax (because not using dot notation can and will eventually give unexpected errors)
this inside a method on an object refers to the parent object. In this case this inside a method on the $scope object references $scope. You are correct that this is not ALWAYS $scope, but in this case it is.
It actually doesn't, as you can see in this article, angularjs's scopes aren't the javascript reference that would be retrieved with this, rather they're a collection handled by angularjs to encapsulate the data (where this is a child scope and $scope is a parent scope)... you can verify this by using the debugger in your browser to breakpoint on a this see what it evaluates to and then seeing what $scope evaluates to; you will find that $scope.ctrl is what this refers to in the top level of the controller
Note: when I say $scope.ctrl the ctrl refers to what the controller is named with then Controller as ctrl syntax, when that syntax isn't used this isn't found in $scope (and it's properties aren't found either)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.