Question

我有一个对象，其成员是对象和数组。这就是它在控制台中的样子：

Object {UserAccount: Object}
    UserAccount: Object
        UserAccountId: 2
        User: Object
            UserId: 2
            UserRoles: Array [2]
                0: Object
                    UserRoleId: 2
                    RoleId: 1
                    Org: Object
                        OrgId: 2
                        OrgName: "Little League"
                1: Object
                    UserRoleId: 7
                    RoleId: 1
                    Org: Object
                        OrgId: 5
                        OrgName: "Youth Soccer"

我需要一个循环，为每个OrgName插入一个子元素。到目前为止，这是HTML：

<div class="sp">
    <div class="tabs">
        <!-- Want to insert element here -->
    </div>

我正在尝试编写一个javascript循环，但它无法正常工作。我认为原因是我不知道如何引用其他对象内的对象成员。这来自.js文件：

var i;
for (i in userAccount.User.UserRoles) {
    $('.tabs').append('<span>' + Org.OrgName + '</span>');
}

当我运行它时，我收到此错误：

未捕获的TypeError：无法读取未定义的属性“UserRoles”

请帮忙！

Answer 1

由于您正在遍历数组，因此请使用迭代for循环。

var roles = UserAccount.User.UserRoles;
for(var i = 0; i < roles.length;i++){
     var role = roles[i];
     $('.tabs').append('<span>' + role.Org.OrgName + '</span>');
}

Answer 2

试

UserAccount.User.UserRoles.forEach(function(userRole) { 

   $('.tabs').append('<span>' + userRole.Org.OrgName + '</span>'); 

});

你也可以做一个常规的for循环。或者您可以将自己的实现功能实现为实用功能，因为使用常规功能会令人沮丧，因此您可以干，而不是重复自己：

var each = function(elements,fn) {
 for (var i = 0; i < elements.length && !fn(elements[i], i++););
};

Answer 3

到目前为止看起来不错。但它看起来像forEach和for循环的混合。

这是未经测试的，但在userAccount.User.UserRoles[i] 工作之前添加Org.OrgName。

var i;
for (i in userAccount.User.UserRoles) {
    $('.tabs').append('<span>' + userAccount.User.UserRoles[i].Org.OrgName + '</span>');
}

另一种选择。我发现更容易阅读的一个是使用forEach循环。

userAccount.User.UserRoles.forEach(function (role) {
    $('.tabs').append('<span>' + role.Org.OrgName + '</span>');
});

注意：IE8中不支持forEach。如果这是您的应用程序支持的浏览器，请尝试使用提供IE8友好forEach选项的jQuery或Underscore。两者都称为$ .each（）_.each（）

Answer 4

这项工作有element.querySelector()。你只是喜欢

var   myParentElement = document.querySelector(".sp"),
    myElementToAppend = myParentElement.querySelector(".tabs");
myElementToAppend.appendChild(yourNewElement);

如何使用javascript迭代对象数组

4 个答案: