wrapper class in lightning Component salesforce - Salesforce Globe 4u

Example:
Apex Class(wrapper) : GameDataWrapper
public class GameDataWrapper {
@AuraEnabled
public List<String> members;
@AuraEnabled
public String game;
public GameDataWrapper () {
members = new List<String>();
game ='';
}
}
Apex Class : SportsController
public class SportsController {
      @AuraEnabled
    public static List<GameDataWrapper> getSportDetails() {
        List<GameDataWrapper> gamesList = new List<GameDataWrapper>();
        GameDataWrapper singleGameDataWrapper = new GameDataWrapper();
        singleGameDataWrapper.members.add('Sachin');
        singleGameDataWrapper.members.add('Dhoni');
        singleGameDataWrapper.members.add('Kohli');
        singleGameDataWrapper.game = 'Cricket';
        gamesList.add(singleGameDataWrapper);
         GameDataWrapper singleGameDataWrapper1 = new GameDataWrapper();
        singleGameDataWrapper1.members.add('Sreejesh');
        singleGameDataWrapper1.members.add('sardara Singh');
        singleGameDataWrapper1.members.add('Danish');
        singleGameDataWrapper1.game = 'Hockey';
        gamesList.add(singleGameDataWrapper1);
        return gamesList;
    }
 
}
Sports.cmp :
<aura:component controller="ksk.SportsController" implements="forceCommunity:availableForAllPageTypes,force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId">
    <aura:handler name="init" action="{!c.myAction}" value="{!this}" />
   <aura:attribute name="gameTypes" type="ksk.GameDataWrapper[]"/>
   <div class="slds-form-element">
<ol >
             <li><b>Game:</b>
             <aura:iteration items="{!v.gameTypes}" var="type" indexVar="index">
                 <li>{!index+1}) {!type.game}</li>
                     <b>Players :</b>
                     <aura:iteration items="{!type.members}" var="member" indexVar="index1">
                         <li>{!index1+1}. {!member}</li>
                     </aura:iteration>
             </aura:iteration></li>
        </ol>
    </div>
</aura:component>
SportsController.js :
({
    myAction : function(component, event, helper) {
        var action = component.get("c.getSportDetails");
    action.setCallback(this, function(data) {
    component.set("v.gameTypes", data.getReturnValue());
        console.log(data.getReturnValue());
    });
    $A.enqueueAction(action);
    }
})

Sports.app :
<aura:application >
    <ltng:require styles="{!$Resource.SLDS100 +
         '/assets/styles/salesforce-lightning-design-system-ltng.css'}"/>
    <div class="slds">
         <c:Sports />
    </div>
</aura:application>

Output :