+ Start a Discussion
Akanksha Gupta 77Akanksha Gupta 77 

how to display data from apex controller to lightning component

Hi all can someone help me with lightning component.
Actually I want to display the list which is returned from my apex class . Please tell me the solution 
Best Answer chosen by Akanksha Gupta 77
Khan AnasKhan Anas (Salesforce Developers) 
Hi Akanksha,

Greetings to you!

Please refer to below link: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/controllers_server_intro.htm

Try the below code, I have tested in my org and it is working fine. Kindly modify the code as per your requirement.

Apex:
public class ContactDisplayC {
    
    @AuraEnabled
    
    public static List<Contact> show(){
        List<contact> contacts=[SELECT Id, FirstName, LastName, Phone FROM Contact LIMIT 5];
        return contacts;        
    }
}

Component:
<aura:component controller="ContactDisplayC"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <aura:attribute name="data" type="Object"/>
    <aura:attribute name="columns" type="List"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <lightning:datatable keyField="id" 
                         data="{!v.data}" 
                         columns="{!v.columns}"/>
</aura:component>

Controller:
({
    doInit : function(component, event, helper) {
        component.set('v.columns',[
            
            {label: 'First Name', fieldName: 'FirstName', type: 'text'},
            {label: 'Last Name', fieldName: 'LastName', type: 'text'},
            {label: 'Phone', fieldName: 'Phone', type: 'text'}
            
        ]);
        var action=component.get("c.show");
        action.setCallback(this,function(response){
            var state=response.getState();
            if(state==='SUCCESS'){
                
                var result=response.getReturnValue();
                component.set("v.data",result);
            }
        });
        $A.enqueueAction(action);
    },
})

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

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas

All Answers

Khan AnasKhan Anas (Salesforce Developers) 
Hi Akanksha,

Greetings to you!

Please refer to below link: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/controllers_server_intro.htm

Try the below code, I have tested in my org and it is working fine. Kindly modify the code as per your requirement.

Apex:
public class ContactDisplayC {
    
    @AuraEnabled
    
    public static List<Contact> show(){
        List<contact> contacts=[SELECT Id, FirstName, LastName, Phone FROM Contact LIMIT 5];
        return contacts;        
    }
}

Component:
<aura:component controller="ContactDisplayC"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <aura:attribute name="data" type="Object"/>
    <aura:attribute name="columns" type="List"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <lightning:datatable keyField="id" 
                         data="{!v.data}" 
                         columns="{!v.columns}"/>
</aura:component>

Controller:
({
    doInit : function(component, event, helper) {
        component.set('v.columns',[
            
            {label: 'First Name', fieldName: 'FirstName', type: 'text'},
            {label: 'Last Name', fieldName: 'LastName', type: 'text'},
            {label: 'Phone', fieldName: 'Phone', type: 'text'}
            
        ]);
        var action=component.get("c.show");
        action.setCallback(this,function(response){
            var state=response.getState();
            if(state==='SUCCESS'){
                
                var result=response.getReturnValue();
                component.set("v.data",result);
            }
        });
        $A.enqueueAction(action);
    },
})

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

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
This was selected as the best answer
Akanksha Gupta 77Akanksha Gupta 77
Thank u for your response
Deepali KulshresthaDeepali Kulshrestha
Hi Akanksha,


I have gone through your problem, Please try below code:

--------------------------------------------------------
This is apex controller - Test_Show_List_Controller.apxc

public class Test_Show_List_Controller {
   
    @AuraEnabled
    
    public static List<Account> getAllAccount(){
        List<Account> acc_List=[SELECT Id, Name FROM Account LIMIT 100];
        return acc_List;        
    }
}
----------------------------------------
This is component - Test_Show_List.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,
                            force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global"
                controller="Test_Show_List_Controller">
    <aura:attribute name="acclist" type="Account[]"/>
    <aura:handler name="init" value="{!this}" action="{!c.allAccount}"/>
    <table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_fixed-layout slds-table_resizable-cols" role="grid">
        <thead>
           <tr class="slds-line-height_reset">
                <th class="" scope="col">
                    <div class="slds-truncate" title="Account Name">ACCOUNT NAME</div>
                </th>
                <th class="" scope="col">
                    <div class="slds-truncate" title="Account Id">ACCOUNT ID</div>
                </th>  
            </tr>        
        </thead>
        <tbody>
            <aura:iteration items="{!v.acclist}" var="acc">
                <tr>
                    <td>
                        {!acc.Name}
                    </td>
                    <td>
                        {!acc.Id}
                    </td>
                </tr>
            </aura:iteration>                
        </tbody>
    </table>
    
</aura:component>
------------------------------------------------------------
This is Javascript controller - Test_Show_ListController.js

({
    allAccount : function(component, event, helper) {
        var action = component.get("c.getAllAccount");
        
        action.setCallback(this,function(a)
                           {
                               component.set("v.acclist",a.getReturnValue()) ; 
                           });
        
        $A.enqueueAction(action);
    }
    
})
---------------------------------------------
This is Application - TestShowList.app

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

 

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha
www.kdeepali.com