The Value in the Apex Class in Right , but when returned to my controller it is Empty

Question

So I have this code on my apex controller:

 @AuraEnabled
public static List<GroupedJobApplicationWrapper> setGroupings() {
    List<GroupedJobApplicationWrapper> groupedJobApplicationList = new List<GroupedJobApplicationWrapper>();
    Set<string> positionList = new Set<string>();


    for(Position__c pos: [Select id , job_title__C from position__c]){
        positionList.Add(pos.job_title__c);
    }

    for(string pos : positionList){
        GroupedJobApplicationWrapper applicationGrouped  = new GroupedJobApplicationWrapper();
        List<Job_application__C> jobAppList = new List<Job_application__C>();

        for(job_application__c ja : [select id, position__r.job_title__c from job_application__c where position__r.job_title__c =:pos]){
            jobAppList.add(ja);

        }
        applicationGrouped.Job_apps = jobAppList;
        applicationGrouped.PositionName = pos;

        groupedJobApplicationList.Add(applicationGrouped);
    }
    system.debug('test3'+groupedJobApplicationList);
    return groupedJobApplicationList;
}

The system.debug is right I have this :

10:06:13:042 USER_DEBUG [44]|DEBUG|test3(GroupedJobApplicationWrapper:[Job_apps=(Job_Application__c:{Id=a020o00000wDGPeAAO, Position__c=a030o00001JTBXNAA5}, Job_Application__c:{Id=a020o00000wDGtFAAW, Position__c=a030o00001JTBXNAA5}, Job_Application__c:{Id=a020o00000wDGuDAAW, Position__c=a030o00001JTBXNAA5}, Job_Application__c:{Id=a020o00000wDGurAAG, Position__c=a030o00001JTBXNAA5}, Job_Application__c:{Id=a020o00000wDGuwAAG, Position__c=a030o00001JTBXNAA5}, Job_Application__c:{Id=a020o00000wDGv1AAG, Position__c=a030o00001JTBXNAA5}

but when I returned it and logged it from the controller which is this:

onSelectGroupChange: function(component,event,helper){

    var selectedGrouping = component.get("v.selectedGrouping");

    if(selectedGrouping == "All"){
        component.set("v.groupMode",null);
        $A.enqueueAction(component.get('c.doInit'));
    }
    else{
        component.set("v.groupMode",selectedGrouping)
        var action = component.get("c.setGroupings");
        action.setCallback(this,function(response){     
        var state = response.getState(); 
        if(state === "SUCCESS"){
            var x = response.getReturnValue();
            console.log(x); <-------- THE LOG
        }
    });
    $A.enqueueAction(action);
    }
}

I got this:

What is happening here

EDIT: Addtional Information GroupedJobApplicationWrapper is a WrapperClass which is this:

public class GroupedJobApplicationWrapper {
    public string PositionName{get;set;}
    public List<Job_application__c> Job_apps{get;set;}
}

Is this causing the problem?

Answer 1

Use the AuraEnabled Annotation to enable client- and server-side access to the wrapper class methods in the controller. i.e.:

public class GroupedJobApplicationWrapper {
    @AuraEnabled
    public string PositionName { get; set; }
    @AuraEnabled
    public List<Job_application__c> Job_apps { get; set; }
}