<aura:component controller="AccountRelatedContacts"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <aura:attribute name="PageHeading" type="String" default="Account and Related Contacts" />
    <!--aura:attribute name="accData" type="List"/>
    <aura:attribute name="conData" type="List"/-->
    <aura:attribute name="show" type="boolean" default="false"/>
    <aura:attribute name="AccountContactWrapper" type="AccConWrapper"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.doinit}" />
    
    <div class=" slds-page-header slds-text-heading--large slds-align--absolute-center">       
        {!v.PageHeading}              
    </div>
    <div class="slds-section slds-is-open">
        <table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
            <thead>
                <tr class="slds-text-heading--label">
                    <th scope="col"><div class="slds-truncate" title="Account Name">Account Name</div></th>
                    <th scope="col"><div class="slds-truncate" title="Phone">Phone</div></th>
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.AccountContactWrapper.accountInfoList}" var="row" indexVar="index">
                    <tr>
                        <th scope="row">
                            <div class="slds-truncate" >
                                <lightning:input name="accName" disabled="true" value="{!row.accName}"/>
                                <!--a onclick="{!c.showCon}" value="{!row}" data-index="{!index}"-->
                            </div>
                        </th>
                        <td><div class="slds-truncate" title="{!row.Phone}">
                            	<lightning:input name="accPhone" disabled="true" value="{!row.accPhone}"/>
                            </div>
                        </td>
                        <td><lightning:button 
                             	label="View Contacts" value="{!index}" onclick="{!c.showCon}" variant="brand"/>
                        </td>
                        <aura:renderIf isTrue="{!v.show}">
                        	<div class="slds-section slds-is-open">
                            <table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
                                <thead>
                                    <tr class="slds-text-heading--label">
                                        <th scope="col"><div class="slds-truncate" title="Contact Name">Contact Name</div></th>
                                        <th scope="col"><div class="slds-truncate" title="Phone">Phone</div></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <aura:iteration items="{!row.relatedContactInfoList}" var="row2">
                                        <tr>
                                            <th scope="row">
                                                <div class="slds-truncate" title="{!row2.Name}">
                                                    <lightning:input name="conName" disabled="true" value="{!row2.conName}"/>
                                                </div>
                                            </th>
                                            <td>
                                                <div class="slds-truncate" title="{!row2.Phone}">
                                                    <lightning:input name="conPhone" disabled="true" value="{!row2.conPhone}"/>
                                                </div>
                                            </td>
                                        </tr>
                                    </aura:iteration>
                                </tbody>
                            </table>
                        </div>
                    	</aura:renderIf>
                    </tr>
                </aura:iteration>
            </tbody>
        </table>
    </div>
    <br/>
    
</aura:component>

 

public class AccConWrapper {
	@AuraEnabled public list<AccountInfo> accountInfoList;
    
    public class AccountInfo{
        @AuraEnabled public String accName;
        @AuraEnabled public String accPhone;
        @AuraEnabled public list<RelatedContactInfo> relatedContactInfoList;
        @AuraEnabled public Boolean showContacts;
        public AccountInfo(){
            showContacts=false;
        }
    }
    
    public class RelatedContactInfo{
        @AuraEnabled public String conName;
        @AuraEnabled public String conPhone;
    }
}

 

public class AccountRelatedContacts {
    @AuraEnabled
    public static AccConWrapper getAccConWrapperList() {
        AccConWrapper ac = new AccConWrapper();
        ac.accountInfoList = new List<AccConWrapper.AccountInfo>();
        for(Account a: [SELECT Id, Name, Phone, (select name,phone from contacts) FROM Account where Id in (Select AccountId from Contact) LIMIT 5])
        {
            AccConWrapper.AccountInfo az = new AccConWrapper.AccountInfo();
            az.accName= a.Name;
            az.accPhone= a.Phone;
            az.relatedContactInfoList = new List<AccConWrapper.RelatedContactInfo> () ;  
            for(Contact c: a.Contacts)
            {
                AccConWrapper.RelatedContactInfo cz = new AccConWrapper.RelatedContactInfo();
                cz.conName= c.Name;
                cz.conPhone= c.Phone;
                az.relatedContactInfoList.add(cz);
            }
            ac.accountInfoList.add(az);
        }
        return ac;        
    }
    
}

 

//aura component js controller
({
    doinit : function(component, event, helper) {
        var action = component.get('c.getAccConWrapperList');
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === "SUCCESS"){
                var allValues = response.getReturnValue();
                console.log("allValues--->>> " + allValues);
                component.set('v.AccountContactWrapper', allValues);
            }
            else if(state === "ERROR") {
                var errors = response.getError();
                if(errors){
                    if(errors[0] && errors[0].message){
                        console.log("Error Message: " + errors[0].message);
                    }
                }
                else{
                    console.log("Unknown Error");
                }
            }
        });
        $A.enqueueAction(action);
    },
    
    showCon : function(component, event, helper){
        var AccountContactWrapper = JSON.stringify(component.get("v.AccountContactWrapper"));
        var idx = event.getSource().get("v.value");
        console.log('index',idx)
        
        component.set("v.show",true);
        
    }
}

This is how my UI looks like. When I click on View Contacts button contacts related to all the accounts get fetched. But I dont want that. I want contacts related to only that account on which button was clicked. Please help me.