开发者问题收集

javascript 迭代对象数组

2017-05-31
103

我正在使用 Angular 应用程序,在控制器内部,我需要迭代对象数组。这是此情况下涉及的控制器和代码:

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... }
    }
}]);

问题是,当我提交登录表单(调用 scope.login() )时,我在控制台中收到一条错误消息:

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

loginController.js:44 对应于 for(let u of this.users) {{ 行。我搜索了网络(W3 Schools、MDN 和此网站),但解决方案对我不起作用。我已经尝试了以下解决方案:

  • for(var u of this.users)
  • var u; for(u in this.users)
  • for(var i = 0; i < this.users.lenght; i++) :这会将错误消息更改为 无法读取未定义的属性“length”

我觉得这很简单,但我搞不清楚它是什么(我对 Javascript 不是很熟练,抱歉)。有人能帮我解决这个问题吗?

提前感谢您的回答。

2个回答

范围在登录函数内发生变化,因此变量 this 与该函数内的变量之前不同。

scope.login = function() { 之前,您可以编写:

var _this = this;

然后使用 _this.users.forEach(function(user) {

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

graemeboy
2017-05-31

this 上下文在您的 scope.login = function () {} 内部发生变化,因为它是一个对象方法, this 是对 scope 的引用。试试这个:

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... }
    }
}]);
bcr
2017-05-31