Simple Lightning Component with Wrapper Class

 Hi,

Here we are going to learn how to capture or display the wrapper result with a simple example.

When we want to access the wrapper properties we have to make sure that properties with "@Auraenabled" annotation.

Eg: 

Apex Class : 

public with sharing class WrapExample {

    public class Wrappercls{

        @Auraenabled

        public String firstName{get;set;}

        @Auraenabled

        public String lastName{get;set;}    

    }

    @Auraenabled

    public static Wrappercls getWrapperDetail(){

        Wrappercls wrapObn = new Wrappercls();

        wrapObn.firstName= 'Navarshi';

        wrapObn.lastName = 'Malem';

        return wrapObn;

    }

}

Aura Component:

<aura:component controller="WrapExample" 

    implements="flexipage:availableForAllPageTypes">

    <aura:attribute name="wrapObj" type="Object" />

    <aura:handler name="init" value="{!this}" action="{!c.retrieveWrapRecord}" />

    <lightning:card title="Wrapper Record Detail" iconName="utility:connected_apps">

        <p class="slds-p-horizontal_small">

        <h1><b>First Name : </b>{!v.wrapObj.firstName}</h1>

        <h1><b>Last Name : </b>{!v.wrapObj.lastName}</h1>

        </p>

    </lightning:card>

</aura:component>

Component Controller:

({

    retrieveWrapRecord : function(component, event, helper) {

        var action = component.get("c.getWrapperDetail");

        action.setCallback(this, function(data) {

            component.set("v.wrapObj", data.getReturnValue());

        });

        $A.enqueueAction(action);

    }

})

Reference : 

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/controllers_server_apex_create.htm