getRoles() doesn't work in a for loop

[lmacklin]

I have multiple roles defined and want to retrieve the roles for a given user. The particular user I am testing has 2 roles. This works fine OUTSIDE of a for loop which is the commented out section of the below code.

However it DOES NOT work when the exact same code is placed inside of the below for loop. Why??

Here is the code:
//####### getRoles() ONLY WORKs ON LIVE Site (NOT Preview)
//get user Roles
let userroles = user.getRoles()
.then( (roles) => {
let numRoles = roles.length;
$w( “#numRoles” ).value = numRoles;
if (numRoles > 0 ) {

	/* 
             	//  ######### WORKS #########    
                	let firstRole = roles[0]; 
                	$w("#userrole1").text = firstRole.name; 
               	 let secondRole = roles[1]; 
                	$w("#userrole2").text = secondRole.name; 
            */ 

	//  #########  forLoop DOES NOT WORK ######### 
	**for**  ( var  i =  0 ; i < numRoles.length; i++) { 
		if  (i ===  0 ) { 
			let  firstRole = roles[ 0 ]; 
                    	$w( "#userrole1" ).text = firstRole.name; 
             	} 
		if  (i ===  1 ) { 
			let  secondRole = roles[ 1 ]; 
                        	$w( "#userrole2" ).text = secondRole.name; 
                    } 
                } 
            } 
    }) 
    . catch ( (error) => { 
        console.log(error); 
    } );

[lmacklin]

Here is another solution that WORKS. I used a forEach loop instead of a for loop. Still don’t know why the for loop doesn’t work since the code in the forEach loop is exactly the same.

// ######### forEach loop WORKS #########
roles.forEach(myFunction);
function myFunction(value, index, array) {
if (index === 0 ) {
let firstRole = value;
$w( “#userrole1” ).text = firstRole.name;
}
if (index === 1 ) {
let secondRole = value;
$w( “#userrole2” ).text = secondRole.name;
}
if (index === 2 ) {
let thirdRole = value;
$w( “#userrole3” ).text = thirdRole.name;
}
}