i want to display child object records when click on parent object record name in lightning component

Question

I have two custom objects now I am displaying parent object records with a name in the component. When a user clicks on the name of the parent object record I want to show child object records for that parent please suggest me something.

Apex Controller

public class DocumentGroupSequencingCtrl{

    @AuraEnabled
    public static List<Department__c> getSupplierNetRecords() {
        return new List<Department__c>([Select id,Name from SupplierNet_Department__c ORDER BY Sequence__c desc LIMIT 100]);
    }
    @AuraEnabled
    public static List<Group__c> getDocumentGroupRecords() {
        return new List<Group__c>([Select id,Name,Sequence__c
                                                    from Group__c ORDER BY Sequence__c desc LIMIT 100]);
    }
}

Component

<aura:component controller="DocumentGroupSequencingCtrl"
                implements="force:appHostable,forceCommunity:availableForAllPageTypes,flexipage:availableForAllPageTypes"
                access="global">
    <aura:attribute name="displayNewAccount" type="Boolean" default="false"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" /> <!-- calling doInit method in Component Controller -->
    <!--<aura:handler event="c:NewClosedModalEvent" action="{!c.newClosedModal}"/> --> <!-- create event for closed modal.-->
    <aura:attribute name="accLst" type="Department__c[]"/> <!-- create Array type Account variable-->
    <aura:attribute name="documentGroupLst" type="Group__c[]"/>
    <article class="slds-card">
        <div class="slds-grid slds-grid_frame">
        <div class="slds-card__header slds-grid">
            <header class="slds-media slds-media_center slds-has-flexi-truncate">
               <!-- <div class="slds-media__figure">
                    <span class="slds-icon_container slds-icon-standard-account" title="description of icon when needed">
                        <lightning:icon iconName="standard:account" size="large" alternativeText="List account"/>
                    </span>
                </div>-->
               <!-- <div class="slds-media__body">
                    <h2>
                        <a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="Account">
                            <span class="slds-text-heading_small">Account</span>
                        </a>
                    </h2>
                </div> -->
            </header>
           <!-- <div class="slds-no-flex">
                <lightning:button label="New" onclick="{!c.showAccountModal}"/>
            </div>-->
        </div>
        <div class="slds-card__body">
            <table class="slds-table slds-table_bordered slds-no-row-hover slds-table_cell-buffer">
                <thead>
                    <tr class="slds-text-title_caps">
                        <th scope="col">
                            <div class="slds-truncate" title="Departments">Departments</div>
                        </th>
                       <!-- <th scope="col">
                            <div class="slds-truncate" title="Type">Type</div>
                        </th>
                        <th scope="col">
                            <div class="slds-truncate" title="Phone">Phone</div>
                        </th>-->
                    </tr>
                </thead>
                <tbody>
                    <aura:iteration items="{!v.accLst}" var="acc"> <!-- iteration account record.-->
                        <tr class="slds-hint-parent">
                            <th scope="row">
                                <div class="slds-truncate" title="Adam Choi"><a href="javascript:void(0);">{!acc.Name}</a></div>
                            </th>
                           <!-- <td>
                                <div class="slds-truncate" title="Company One">{!acc.Type}</div>
                            </td>
                            <td>
                                <div class="slds-truncate" title="{!acc.Phone}">{!acc.Phone}</div>
                            </td>-->
                        </tr>                     
                    </aura:iteration>
                </tbody>
            </table>
        </div>
            <div>
                <table class="slds-table slds-table_bordered slds-table_cell-buffer">
                    <thead>
                        <tr class="slds-text-title_caps">
                            <th scope="col">
                                <div class="slds-truncate" title="Opportunity Name">Opportunity Name</div>
                            </th>
                            <th scope="col">
                                <div class="slds-truncate" title="Account Name">Account Name</div>
                            </th>
                            <th scope="col">
                                <div class="slds-truncate" title="Close Date">Close Date</div>
                            </th>
                            <th scope="col">
                                <div class="slds-truncate" title="Stage">Stage</div>
                            </th>
                            <th scope="col">
                                <div class="slds-truncate" title="Confidence">Confidence</div>
                            </th>
                            <th scope="col">
                                <div class="slds-truncate" title="Amount">Amount</div>
                            </th>
                            <th scope="col">
                                <div class="slds-truncate" title="Contact">Contact</div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row" data-label="Opportunity Name">
                                <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div>
                            </th>
                            <td data-label="Account Name">
                                <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
                            </td>
                            <td data-label="Close Date">
                                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
                            </td>
                            <td data-label="Prospecting">
                                <div class="slds-truncate" title="Prospecting">Prospecting</div>
                            </td>
                            <td data-label="Confidence">
                                <div class="slds-truncate" title="20%">20%</div>
                            </td>
                            <td data-label="Amount">
                                <div class="slds-truncate" title="$25k">$25k</div>
                            </td>
                            <td data-label="Contact">
                                <div class="slds-truncate" title="jrogers@cloudhub.com"><a href="javascript:void(0);">jrogers@cloudhub.com</a></div>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row" data-label="Opportunity Name">
                                <div class="slds-truncate" title="Cloudhub + Anypoint Connectors"><a href="javascript:void(0);">Cloudhub + Anypoint Connectors</a></div>
                            </th>
                            <td data-label="Account Name">
                                <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
                            </td>
                            <td data-label="Close Date">
                                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
                            </td>
                            <td data-label="Prospecting">
                                <div class="slds-truncate" title="Prospecting">Prospecting</div>
                            </td>
                            <td data-label="Confidence">
                                <div class="slds-truncate" title="20%">20%</div>
                            </td>
                            <td data-label="Amount">
                                <div class="slds-truncate" title="$25k">$25k</div>
                            </td>
                            <td data-label="Contact">
                                <div class="slds-truncate" title="jrogers@cloudhub.com"><a href="javascript:void(0);">jrogers@cloudhub.com</a></div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
       </div>
        <footer class="slds-card__footer"><a href="javascript:void(0);"></a></footer>
    </article>

    <aura:if isTrue="{!v.displayNewAccount}">
        <!--<c:Salesforceadda_NewAccount /> --> <!-- this is another component and contains popup and there fields to save account info -->
    </aura:if>
</aura:component>

controller.js

({
    doInit : function(component, event, helper) {
        helper.getSupplierNetRecordsRecord(component); // Calling Helper method on load
    },
    showAccountModal : function(component,event,helper){
        component.set("v.displayNewAccount",true); // calls to show popup
    },
    newClosedModal:function(component,event,helper){
        component.set("v.displayNewAccount",false);
        helper.getAccontRecord(component); // Calling Helper method to display record after record save from popup
    }
})

Helper.js

({
    getSupplierNetRecordsRecord : function( component ) {
        var action = component.get("c.getSupplierNetRecordsRecord"); //Calling Apex class controller 'getAccountRecord' method
        action.setCallback(this, function(response) {
            var state = response.getState(); //Checking response status
            var result = JSON.stringify(response.getReturnValue());
            if (component.isValid() && state === "SUCCESS")
                component.set("v.accLst", response.getReturnValue());  // Adding values in Aura attribute variable.   
        });
        $A.enqueueAction(action);
    },
})

Answer 1

I'm taking the example of Account and Contact, where Account is parent and Contact is Child. Whenever user will click on Account Name it will display its related Contacts.

Component:

<aura:component controller="GetAccountAndContacts">
    <aura:attribute name="accounts" type="Account[]"/>
    <aura:attribute name="contacts" type="Contact[]"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <div>
        <div style="text-align:center;font-size:25px">
            Accounts
        </div>

        <aura:iteration items="{!v.accounts}" var="acc">
        <div class="slds-truncate" title="Adam Choi" >
            <a href="javascript:void(0);" onclick="{!c.Clicked}" data-value="{!acc.Id}">
                {!acc.Name}
            </a>
        </div>
    </aura:iteration>
    </div>
    <div>
        <div style="text-align:center;font-size:25px">
            Contacts
        </div>
        <aura:iteration items="{!v.contacts}" var="con">
        <div class="slds-truncate" title="Adam Choi" >
                {!con.Name}
        </div>
    </aura:iteration>
    </div>
</aura:component>

Controller.js:

({
    doInit : function(component, event, helper) {
        var action = component.get("c.getAccountRecords");
        action.setCallback(this, function(response) {
            var state = response.getState(); //Checking response status
            console.log("accounts... "+JSON.stringify(response.getReturnValue()));
            if (component.isValid() && state === "SUCCESS")
                component.set("v.accounts", response.getReturnValue());  // Adding values in Aura attribute variable.   
        });
        $A.enqueueAction(action);
    },

    Clicked : function(component, event, helper){
        var ctarget = event.currentTarget;
        var id_str = ctarget.dataset.value;
        console.log(id_str);

        var action = component.get("c.getContactRecords");
        action.setParams({ accId :  id_str});
        action.setCallback(this, function(response) {
            var state = response.getState(); //Checking response status
            console.log("contactsss... "+JSON.stringify(response.getReturnValue()));
            if (component.isValid() && state === "SUCCESS")
                component.set("v.contacts", response.getReturnValue());  // Adding values in Aura attribute variable.   
        });
        $A.enqueueAction(action);
    }
})

Apex Controller:

public class GetAccountAndContacts {

     @AuraEnabled
    public static List<Account> getAccountRecords() {
        return new List<Account>([Select id,Name from Account LIMIT 100]);
    }
    @AuraEnabled
    public static List<Contact> getContactRecords(string accId) {
        return new List<Contact>([Select id,Name from Contact Where AccountId =: accId LIMIT 100]);
    }
}

Here we have two attribute for Accounts and Contacts. On Init list of Accounts will be loaded. Whenever user will click on Account Name onclick event will fire and it will call the Clicked controller method, which in turns pass the Account Id to apex controller method which will return related contacts.

Hope this will help you.