How to show sub query count in aura iteration

Question

I would like to show contacts count for each account in auta iterataion how to show sub query count in aura iteration?

Component code:

<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} &nbsp;&nbsp; Contacts 
        Count- </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>

JS controller:

({
 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);
 },
})

Apex Class:

public class accWithContController {
 @AuraEnabled
 public static list < Account > fetchAccount() {

  List < Account > lstOfAcc = [select Name, AnnualRevenue, BillingState, (select LastName from contacts) from Account LIMIT 100];
  return lstOfAcc;
 }
}

---

actually its working for account and contacts but i have 2 custom objects with lookup relationship for that it was not working hence i have written wrapper class to get child object count to displayed in lightning component. Thanks,Anil

Answer 1

You can use length property to return the number of elements in an array, like this :

Return the length of an array:
array.length

This component code should work

<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} &nbsp;&nbsp; Contacts 
        Count- {!acc.Contacts.length} </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>

Please see the below screenshot: