Как перебирать массив объектов с помощью javascript

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>'); 
} 

Когда я запускаю его я получаю эту ошибку:

Uncaught TypeError: Cannot read property 'UserRoles' of undefined

Пожалуйста, помогите!

Answer 1

Поскольку вы перебираете массив, используйте итеративный цикл.

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>'); 

}); 

Вы можете сделать регулярной для цикла, а также. Или вы можете реализовать свой собственный один в качестве функции полезности, так как с помощью регулярного один расстраивает, так что вы СУХОЙ вместо того чтобы повторять себя:

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

Answer 3

выглядит хорошо до сих пор. Но это выглядит как смесь forEach и для циклов.

Это не проверено, но добавлено 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>'); 
}); 

Примечание: forEach не поддерживается в IE8. Если это поддерживаемый браузер для вашего приложения, попробуйте использовать jQuery или Underscore, которые предоставляют IE8 дружественный параметр forEach. Оба из них называются каждый $ .each() _.each()

Answer 4

Существует element.querySelector() для этой работы. Вы просто делаете, как

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