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} {!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:
