AuraEnabled attributes of extended classes not returned or not visible in aura server response

Question

I have a class hierarchy starting with abstract class and going multiple levels deep. Every class in the hierarchy has a number of @AuraEnabled attributes.

Top level class

public abstract class MyAbstractClass
{
    @AuraEnabled
    public String attFromAbstractClass { get; set; }
    public MyAbstractClass()
    {
        attFromAbstractClass = 'hello';
    }
}

Class that extends it

public class MyClass extends MyAbstractClass
{
    @AuraEnabled
    public String myAtt { get; set; }

    public MyClass()
    {
         super();
         myAtt = 'world';
    }
}

Controller class

public class CmpCtrl
{
    @AuraEnabled
    static public MyAbstractClass getResult()
    {
         return new MyClass();
    }
}

Aura Application

<aura:application extends="force:slds" controller="CmpCtrl">
    <aura:handleEvent name="init" value="{!this}" action="{!c.init}" />
</aura:application>

Aura Application Controller

({
    init: function(cmp,evt,h) {
       var action = cmp.get('c.getResult');
       action.setCallback(this, function(servResp){
           var state = servResp.getState();
           if(state === 'SUCCESS') {
               console.log(servResp.getReturnValue());
           }
       }, 'ALL');
       $A.enqueueAction(action);
    }
})

The output of the server response is an object with only myAtt visible. How do I access attFromAbstractClass from the response?

Answer 1

I have had the same issue, I was using inheritance on one of my return types to Lightning.

The only option I saw was to serialize the response in the APEX controller and deserialize it back in the JS Controller.

So in your Apex Controller:

public class CmpCtrl
{
    @AuraEnabled
    static public String getResult()
    {
         return JSON.serialize(new MyClass());
    }
}

In your Javascript controller:

({
    init: function(cmp,evt,h) {
       var action = cmp.get('c.getResult');
       action.setCallback(this, function(servResp){
           var state = servResp.getState();
           if(state === 'SUCCESS') {
               var rValue = JSON.parse(servResp.getReturnValue())
               console.log(rValue);
           }
       }, 'ALL');
       $A.enqueueAction(action);
    }
})

Hope this helps you. It's not ideal but it works when using inheritance.