Display result of a SOQL query on a Visualforce page and Lightning component

Apex Class:

Visualforce Page:

To show data from SOQL Query in lightning component, use the following SOQL Query example:

Apex Class accWithContController.apxc

public class accWithContController {
@AuraEnabled
public static list < Account > fetchAccount() {
  // query 10 records from account with their relevant contacts and return query.
List < Account > lstOfAcc = [select Name, AnnualRevenue, BillingState, (select LastName from contacts) from Account LIMIT 10];
  return lstOfAcc;
}
}

Lightning Component

<aura:component controller="accWithContController">
   <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
   <aura:attribute name="ListOfAccount" type="Account[]" description="store accounts with there child contacts"/>
   <ul>
      <aura:iteration items="{!v.ListOfAccount}" var="acc">
         <li type="dice">AccountName : {!acc.Name}</li>
         <ul>
            <aura:iteration items="{!acc.Contacts}" var="con" indexVar="index">
               <li>contact {!index + 1} Name : {!con.LastName}</li>
            </aura:iteration>
         </ul>
         <hr/>
      </aura:iteration>
   </ul>
</aura:component>

Controller Class

({
doInit: function(component, event, helper) {
  //call apex class method
  var action = component.get('c.fetchAccount');
  action.setCallback(this, function(response) {
   //store state of response
   var state = response.getState();
   if (state === "SUCCESS") {
    //set response value in ListOfAccount attribute on component.
    component.set('v.ListOfAccount', response.getReturnValue());
   }
  });
  $A.enqueueAction(action);
},
})