How to wrapper class retrieve all the values in Salesforce Lightning Component

[vijayk3327]

In this post we are going to learn about that how to Wrapper class Retrieve all the Values in Salesforce lightning component.

→ Get source code live demo link:-

Step 1:- Create Lightning Application : wrapperClassCustomObjApp.app

<aura:application extends="force:slds"> <c:wrapperClassCustomObjCmp/> </aura:application>

Step 2:- Create Lightning Component : wrapperClassCustomObjCmp.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>Email</th>
                 <th>Address</th>
            </tr>
        </thead>
        <tbody>
            <aura:iteration items="{!v.wrapListItems}" var="wrapVar" indexVar="index">
                <tr id="{!wrapVar.recStudentId}">
                    <td>{!wrapVar.studentName}</td>                                                
                    <td>{!wrapVar.studentEmail}</td>
                    <td>{!wrapVar.studentAddress}</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 3:- Create Lightning Component : wrapperClassCustomObjCmpConroller.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);
},    

 })`

Step 4:- Create Lightning Component : wrapperClassCustomObjCmpConrollerHelper.js

` ({
refreshView : 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);
}

})`

Step 5:- Create Lightning Application : wrapperCustomObjCtrCmp.apxc

` public class wrapperCustomObjCtrCmp {

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


@AuraEnabled
public static List<wrapperCustomClass> appCustomWrapListMthd(){
   List<NewStudent__c> newStudent = new List<NewStudent__c>();       
   List<wrapperCustomClass> custWrapObj = new  List<wrapperCustomClass>();
   List<NewStudent__c> newStudentView =[Select Id, Name, Email__c, Address__c From NewStudent__c];
    
    Set<Id> projChecklistIdSet= new Set<Id> ();
    for(NewStudent__c de: newStudentView) {
        projChecklistIdSet.add(de.Id);
    }
        
    for(NewStudent__c studentObj:newStudentView){
        custWrapObj.add(new wrapperCustomClass(studentObj.Name,studentObj.Email__c, studentObj.Address__c,studentObj.Id));
    }        
    return custWrapObj;       
   }     

}`

→ Get source code live demo link:-