Wie durch Array von Objekten mit Javascript durchlaufen

Question

Ich habe ein Objekt, dessen Mitglieder Objekte und Arrays sind. Dies ist, wie es in der Konsole aussieht:

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" 

ich eine Schleife benötigen, das ein untergeordnetes Element für jeden OrgName einfügen wird. Hier ist der HTML so weit:

Ich versuche, eine Javascript-Schleife zu schreiben, und es funktioniert nicht. Ich denke, der Grund ist, dass ich nicht weiß, wie man sich auf Objekte innerhalb anderer Objekte bezieht. Dies ist aus der J-Datei:

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

Wenn ich es laufen bekomme ich diesen Fehler:

Uncaught TypeError: Cannot read property 'UserRoles' of undefined

Bitte um Hilfe!

Answer 1

Da Sie ein Array durchlaufen, verwenden Sie die iterative for-Schleife.

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

versuchen

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

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

}); 

Sie können auch eine regelmäßige for-Schleife tun. Oder Sie können Ihre eigenen ein als Nutzenfunktion implementieren als eine regelmäßige ist frustrierend verwenden, so dass Sie DRY statt sich zu wiederholen:

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

Answer 3

sieht gut aus so weit. Aber es sieht wie eine Mischung aus forEach und for-Schleifen aus.

Dies ist nicht getestet, aber userAccount.User.UserRoles[i] vor Org.OrgNamesollte arbeiten.

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

Eine andere Option. Eine, die ich leichter zu lesen finde, ist eine ForEach-Schleife.

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

Hinweis: forEach wird in IE8 nicht unterstützt. Wenn dies ein unterstützter Browser für Ihre Anwendung ist, versuchen Sie es mit jQuery oder Underscore, die eine IE8-freundliche forEach-Option bereitstellen. Beides heißt $ .each() _.each()

Answer 4

Es gibt diese element.querySelector() für diesen Job. Sie tun genau wie

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