Display Inner SOQL Query Data in Lightning Component

Apex Controller:
Create below apex controller to get the inner SOQL query data.

public with sharing class AuraSampleController{
    @AuraEnabled
    public static List<Account> getAccounts() {
        List <Account> accList = [SELECT Name, Type, Industry, (SELECT FirstName, LastName From contacts) From Account LIMIT 5];
        return accList;
    }
}

Sample Lightning Component:
Create below lightning component Sample.cmp for display the inner SOQL query data on component.

<!--Sample.cmp-->
<aura:component controller="AuraSampleController">
    <aura:attribute name="accList" type="Account[]" description="List of Accounts with respective Contacts"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <ul>
        <aura:iteration items="{!v.accList}" var="acc">
            <li type="dice">Account Name : {!acc.Name}</li>
            <ul>
                <aura:iteration items="{!acc.Contacts}" var="con" indexVar="index">
                    <li>Contact Name : {!con.FirstName} &nbsp; {!con.LastName}</li>
                </aura:iteration>
            </ul>
            <hr/>
        </aura:iteration>
    </ul>
</aura:component>

Sample Lightning Component JS Controller:
Create below JavaScript Controller for above Sample.cmp component.

({
    doInit: function(component, event, helper) {
        //Call apex class method
        var action = component.get('c.getAccounts');
        action.setCallback(this, function(response) {
            //Get state of response
            var state = response.getState();
            if (state === "SUCCESS") {
                //Set result in accList attribute on component.
                component.set('v.accList', response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    }
})

Lightning Test App:

<!--Test.app-->
<aura:application extends="force:slds">
    <c:Sample />
</aura:application>

Output:

  • Shradha Khirid

    hi whr is the AuraSampleController class??

    can you help me for custom object and how to get lookup relationship data??

    • Hi Shradha,
      Please check the first code snippet is the AuraSampleController class.

      • Shradha Khirid

        can you please help me for how to take lookup relationship custom object data

        • Please send me the details on my email address itzbiswajeet@gmail.com

          • Shradha Khirid

            i have desk object ,
            i added one lookup relationship field of object employee
            then how to access that employee object deatils on pop up madal

          • You can create a lightning component, on load of that component call apex controller method and pass employee object id from desk object to the apex method. Write SOQL query to get the employee details record and show on lightning popup.

          • Shradha Khirid

            can you please explain me with example for two custom object