How to return data from multiple objects using wrapper class in lightning component

[vijayk3327]

In this post we are going to learn about how to write inner query in Salesforce. And how to fetch data from multiple custom sObject using wrapper apex class in lightning component.

→ Get source code live demo link:-

Step 1:- Create Lightning Component : wrapperCustomObjCmp.cmp

` <aura:component controller="wrapperCustomObjCtrCmp" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction,lightning:isUrlAddressable" access="global" >

<aura:attribute name="wrapListItems" type="NewStudent__c[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="recSelectId" type="String" default=""/>

<div class="slds slds-p-horizontal--medium">
    <table class="slds-table slds-table--bordered slds-table--col-bordered" style="border-collapse:collapse;">
        <thead> 
            <tr>
                <th>Student Name</th>
                <th>Address</th>
                <th>Email</th>
                <th>Registration No.</th>
                <th>Registered Student Name</th>
                <th>Registered Course Name</th>
                <th>Registration Date</th>
                <th></th>                    
            </tr>
        </thead>
        <tbody>
            <aura:iteration items="{!v.wrapListItems}" var="wrapVar" indexVar="index">
                <tr id="{!wrapVar.recStudentId}">
                    <td>{!wrapVar.studentName}</td>                        
                    <td>{!wrapVar.studentAddress}</td>
                    <td>{!wrapVar.studentEmail}</td>
                    <td>{!wrapVar.regNum}</td>
                    <td>{!wrapVar.regStudentName}</td>
                    <td>{!wrapVar.regCourseName}</td>
                    <td>{!wrapVar.regDateOfReg}</td>                        
                    <td>        
                         <a href="javascript:void(0);"><span class="delSpan slds-m-left--small" title="Delete" onclick="{!c.deleteRowId}" 
                                                                    data-sfid="{!wrapVar.recStudentId}"
                                                                    data-index="{!index}"></span></a>
                   </td>                        
                </tr>
            </aura:iteration>
        </tbody>
    </table>

        <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:16px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer" style="text-decoration:none;" data-aura-rendered-by="440:0">An easy way to learn step-by-step online free Salesforce tutorial, To know more Click  <span style="color:#ff8000; font-size:18px;" data-aura-rendered-by="442:0">Here..</span></a></strong></p>

        <br/><br/>
        <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/07/tickMarkIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:17px; font-style:italic; display:inline-block; margin-right:5px; color:rgb(255 128 0);">You May Also Like →</span> </strong></p>
        <div style="display:block; overflow:hidden;"> 
            <div style="width: 50%; float:left; display:inline-block">
                <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
                    <li><a href="https://www.w3web.net/lwc-get-set-lightning-checkbox-value/" target="_blank" rel="noopener noreferrer">How to get selected checkbox value in lwc</a></li>
                    <li><a href="https://www.w3web.net/display-account-related-contacts-in-lwc/" target="_blank" rel="noopener noreferrer">how to display account related contacts based on AccountId in lwc</a></li>
                    <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to create lightning datatable row actions in lwc</a></li>
                    <li><a href="https://www.w3web.net/if-and-else-condition-in-lwc/" target="_blank" rel="noopener noreferrer">how to use if and else condition in lwc</a></li>
                    <li><a href="https://www.w3web.net/get-selected-radio-button-value-and-checked-default-in-lwc/" target="_blank" rel="noopener noreferrer">how to display selected radio button value in lwc</a></li>
                </ul>
        </div>

        <div style="width: 50%; float:left; display:inline-block">
                <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
                    <li><a href="https://www.w3web.net/display-account-related-contacts-lwc/" target="_blank" rel="noopener noreferrer">display account related contacts based on account name in lwc</a></li>
                    <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to insert a record of account Using apex class in LWC</a></li>
                    <li><a href="https://www.w3web.net/fetch-picklist-values-dynamic-in-lwc/" target="_blank" rel="noopener noreferrer">how to get picklist values dynamically in lwc</a></li>
                    <li><a href="https://www.w3web.net/edit-save-and-remove-rows-dynamically-in-lightning-component/" target="_blank" rel="noopener noreferrer">how to edit/save row dynamically in lightning component</a></li>
                    <li><a href="https://www.w3web.net/update-parent-object-from-child/" target="_blank" rel="noopener noreferrer">update parent field from child using apex trigger</a></li>
                </ul>
            </div>
           <div style="clear:both;"></div> 
           <br/>
            <div class="youtubeIcon">
                <a href="https://www.youtube.com/channel/UCW62gTen2zniILj9xE6LmOg" target="_blank" rel="noopener noreferrer"><img src="https://www.w3web.net/wp-content/uploads/2021/11/youtubeIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong>TechW3web:-</strong> To know more, Use this <span style="color: #ff8000; font-weight: bold;">Link</span> </a>
            </div>
</div>

</div>    

</aura:component>`

Step 2:- Create Lightning Component : wrapperCustomObjCmpConroller.js

** ({
doInit : function(component, event, helper) {
var action = component.get("c.appCustomWrapListMthd");
action.setCallback(this, function(response){
var state = response.getState();

        if(state=='SUCCESS'){
            var result = response.getReturnValue();              
            component.set('v.wrapListItems',result);
        }
    });
    $A.enqueueAction(action);
},

deleteRowId:function(component,event,helper){
    var sfid = event.target.dataset.sfid;        
    var action =component.get('c.delectRecId');       
    action.setParams({'delRecId':sfid});
    action.setCallback(this, function(response){
        var state = response.getState();
        if(state == 'SUCCESS'){
            var result = response.getReturnValue();                
            var wrapListItems = component.get( "v.wrapListItems" );
            component.set( "v.wrapListItems", wrapListItems );
            helper.refreshView(component);
            //alert('record deleted successfully');
            
            var eventToast = $A.get("e.force:showToast");
            eventToast.setParams({
                "title":'Success',
                "type":'success',
                "message":'Record deleted successfully.'
               });
             eventToast.fire();
            
        }
    });
    $A.enqueueAction(action);
},

})**

Step 3:- Create Lightning Component : wrapperCustomObjCmpHelper.js

` ({
refreshView : function(component, event, helper) {
var action = component.get("c.appCustomWrapListMthd");

    action.setCallback(this, function(response){
        var state = response.getState();
        //alert(state);
        if(state=='SUCCESS'){
            var result = response.getReturnValue();
           // alert('result ' + JSON.stringify(result));
            component.set('v.wrapListItems',result);
        }
    });
    $A.enqueueAction(action);
}

})`

Step 4:- Create Lightning Component Style CSS: wrapperCustomObjCmp.CSS

` .THIS {
}
.THIS .slds-table thead tr th{background-color:#eee;}
.THIS .slds-table thead tr th, .THIS .slds-table tbody tr td {border:1px #dddbda solid; border-collapse: collapse; white-space: normal;}

.THIS .delSpan:before{content:''; width:17px; height:17px; display:inline-block; background:url(https://www.w3web.net/wp-content/uploads/2022/01/delete.png) no-repeat left top; background-size:cover; cursor: pointer;}`

Step 5:- Create Apex Class : wrapperCustomObjCtrCmp.apxc

` public class wrapperCustomObjCtrCmp {

public class wrapperCustomClass{
    @AuraEnabled
    public string studentName;
    @AuraEnabled
    public string studentEmail;
    @AuraEnabled
    public string studentAddress;
    @AuraEnabled
    public Id recStudentId;       
   
    @AuraEnabled
    public string regNum;
    @AuraEnabled
    public string regStudentName;
    @AuraEnabled
    public string regCourseName;
    @AuraEnabled
    public date regDateOfReg;      
    
    public wrapperCustomClass(string studentName, string studentEmail, string studentAddress, Id recStudentId,
                                                   string regNum,string regStudentName,string regCourseName,date regDateOfReg){
     this.studentName = studentName;
     this.studentEmail = studentEmail;
     this.studentAddress = studentAddress;  
     this.recStudentId = recStudentId;           
                                 
     this.regNum = regNum;
     this.regStudentName = regStudentName;
     this.regCourseName = regCourseName; 
     this.regDateOfReg = regDateOfReg;         
    
    }
    
}


@AuraEnabled
public static List<wrapperCustomClass> appCustomWrapListMthd(){
   List<NewStudent__c> newStudent = new List<NewStudent__c>();
   List<Registration__c> newRegistration = new  List<Registration__c>();
   List<wrapperCustomClass> custWrapObj = new  List<wrapperCustomClass>();    
    
   List<NewStudent__c> newStudentView =[Select Id, Name, Email__c, Address__c,(Select Id, Name, RegNewStudent__r.Name, RegCourse__r.Name, DateOfRegistration__c From Registrations__r) From NewStudent__c];
    
    newRegistration = [Select Id, Name, RegNewStudent__r.Name, RegCourse__r.Name, DateOfRegistration__c From Registration__c ];
        
    for(NewStudent__c studentObj:newStudentView){
        
        for(Registration__c regObj:studentObj.Registrations__r){
             custWrapObj.add(new wrapperCustomClass(studentObj.Name,studentObj.Email__c, studentObj.Address__c,
                                              studentObj.Id,regObj.Name,regObj.RegNewStudent__r.Name,regObj.RegCourse__r.Name,regObj.DateOfRegistration__c));
        }
       
    }
    return custWrapObj;
}


@AuraEnabled
public static List<NewStudent__c> delectRecId(Id delRecId){
    delete [Select Id, (Select Id From Registrations__r Where RegNewStudent__c=:delRecId) From NewStudent__c Where Id=:delRecId];
    List<NewStudent__c> listStudent = [Select Id, Name, Email__c, Address__c,(Select Id, Name, RegNewStudent__r.Name, RegCourse__r.Name, DateOfRegistration__c From Registrations__r) From NewStudent__c];
    return listStudent;
}

}`

→ Get source code live demo link:-