function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ 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
Rhythm SharmaRhythm Sharma

Hello Khan Anas and Deepali Kulshrestha.

what should we do if we are getting data through API in controller class and we want to show data on aura page ?