[英]javascript iterate over array of objects
I'm working in an Angular app and inside a controller I need to iterate over an array of objects. 我正在使用Angular应用程序,在控制器内部,我需要遍历一个对象数组。 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: 问题是,当我提交登录表单(调用
scope.login()
)时,我在控制台中收到一条错误消息:
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. loginController.js:44
对应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. 我通过网络搜索(W3学校,MDN和这个网站也),但解决方案对我没用。 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
for(var i = 0; i < this.users.lenght; i++)
:这会将错误消息更改为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). 我觉得这很简单,但我不知道它是什么(我不是很熟悉Javascript,对不起)。 Can anyone help me with this issue?
任何人都可以帮我解决这个问题吗?
Thanks in advance for your answers. 提前感谢您的回答。
The scope is changing within the login function, so the variable this
isn't the same before as it is within that function. 范围登录功能内改变,因此可变
this
,因为它是该函数内不同前。
Before scope.login = function() {
you can write: 在
scope.login = function() {
之前scope.login = function() {
你可以写:
var _this = this;
then use _this.users.forEach(function(user) {
然后使用
_this.users.forEach(function(user) {
or for (var i = 0; i < _this.users.length; i++)
或者
for (var i = 0; i < _this.users.length; i++)
The this
context changes inside your scope.login = function () {}
, as it's an object method, this
is a reference to scope
. this
上下文在scope.login = function () {}
中更改,因为它是一个对象方法, this
是对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... }
}
}]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.