Hi All ,
I have a requirement wherein I have to show the weather forecasts of the contact's records with respect to their mailing address field.

Here is the flow of my component:
1. There is a search bar wherein you can search the account you want to see.
2. Based on the searched alphabets account list opens with radio buttons to the side.
3. when you select the radio button all the contacts associated to it open up  with radio buttons along side.
 Main Requirement:
4.  when a Contact radio button is selected a weather component should opne up with weather forecast related to the mailing address of that particular contact record.
Here is my current component 

Apex class

public class RadioAccRelatedConC {

    @AuraEnabled
    public static List<Account> getAccounts(string searchKeyWord) {
        String searchKey = searchKeyWord + '%';
        List<Account> returnList =new List<Account>();
        List < Account > lstOfAccount = [select id, Name, Industry,Type, Phone, Fax from account
                                   where Name LIKE: searchKey LIMIT 500];
         for (Account acc: lstOfAccount) {
           returnList.add(acc);
  }
  return returnList;
    }
    
    @AuraEnabled
    public static List<Contact> getCon(List<String> accId) {
        return [SELECT Id, Name, Phone,MailingAddress FROM Contact WHERE AccountId=:accId];
    }
}

Component

<aura:component controller="RadioAccRelatedConC"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <!-- attributes -->
    <aura:attribute name="data" type="Object"/>
    <aura:attribute name="columns" type="List"/>
    <aura:attribute name="data1" type="Object"/>
    <aura:attribute name="columns1" type="List"/>
    <aura:attribute name="selectedRowsCount" type="Integer" default="0"/>
    <aura:attribute name="maxRowSelection" type="Integer" default="5"/>
    <aura:attribute name="isButtonDisabled" type="Boolean" default="true" access="PRIVATE"/>
    <aura:attribute name="searchResult" type="List" description="use for store and display account list return from server"/>
    <aura:attribute name="searchKeyword" type="String" description="use for store user search input"/>
    <aura:attribute name="Message" type="boolean" default="false" description="use for display no record found message"/>
    <aura:attribute name="TotalNumberOfRecord" type="integer" default="0" description="use for display Number of records"/>
   <!-- SHOW LOADING SPINNER--> 
    <lightning:spinner variant="brand" size="large" aura:id="Id_spinner" class="slds-hide" />
    
   <!-- <div class="slds-m-around_medium"> -->
       <!-- SEARCH INPUT AND SEARCH BUTTON--> 
        <lightning:layout horizontalAlign="center">
            <lightning:layoutItem size="3" >
                <lightning:input value="{!v.searchKeyword}"
                                 required="true"
                                 placeholder="search Accounts.."
                                 aura:id="searchField"
                                 label="Account Name"/>
            </lightning:layoutItem>
       
        <lightning:layoutItem size="2" padding="around-large">
               <lightning:button onclick="{!c.Search}"
                                  variant="brand"
                                  label="Search"
                                       iconName="utility:search"/>
            
         </lightning:layoutItem>
           
        </lightning:layout>
       
        <!-- TOTAL RECORDS BADGES--> 
        <div class="slds-m-around_x-small">
            <lightning:badge label="{!v.TotalNumberOfRecord}" />
        </div>
        <!--aura:iteration items="{!v.searchResult}"  var="item">
    
           "{!item.Name}" - "{!item.Type}"
    </aura:iteration-->
        <!-- ERROR MESSAGE IF NOT RECORDS FOUND--> 
        <aura:if isTrue="{!v.Message}">
            <div class="slds-notify_container slds-is-relative">
                <div class="slds-notify slds-notify_toast slds-theme_error" role="alert">
                    <div class="slds-notify__content">
                        <h2 class="slds-text-heading_small">No Records Found...</h2>
                    </div>
                </div>
            </div>
        </aura:if>
    
    
    
    
    
    
    
    <!-- handlers-->
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    
    <!-- the container element determine the height of the datatable -->
    <div style="height: 300px">
        <lightning:datatable
                             columns="{!v.columns }"
                             data="{!v.data }"
                             keyField="id"
                             maxRowSelection="{! v.maxRowSelection }"
                             onrowselection="{! c.updateSelectedText }"/>
    </div>
    
    <br/><br/>
    
    <div style="height: 300px">
        <lightning:datatable
                             columns="{! v.columns1 }"
                             data="{! v.data1 }"
                             keyField="id"
                             maxRowSelection="{! v.maxRowSelection }"
                             onrowselection="{! c.updateSelectedText1 }"                             
                             />
    </div>
    
</aura:component>

Controller

({
    
     Search: function(component, event, helper) {
        var searchField = component.find('searchField');
        var isValueMissing = searchField.get('v.validity').valueMissing;
        // if value is missing show error message and focus on field
        if(isValueMissing) {
            searchField.showHelpMessageIfInvalid();
            searchField.focus();
        }else{
          // else call helper function 
            helper.SearchHelper(component, event);
        }
    },

    
    init: function (component, event, helper) {
        component.set('v.columns', [
            {label: 'Account Name', fieldName: 'Name', editable: false, type: 'text'},
            {label: 'Phone', fieldName: 'Phone', type: 'phone'}
        ]);
        
        component.set('v.columns1', [
            {label: 'Contact Name', fieldName: 'Name', editable: false, type: 'text'},
            {label: 'Phone', fieldName: 'Phone', type: 'phone'},
            {label: 'Address', fieldName: 'MailingAddress', type: 'Address'}

        ]);
        
        var action=component.get('c.getAccounts');
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                var rows = response.getReturnValue();
                component.set("v.data", rows);
            }
        });
        $A.enqueueAction(action);    
        
        component.set('v.maxRowSelection', 1);
        component.set('v.isButtonDisabled', true);
    },
    
    updateSelectedText: function (cmp, event) {
        
        var selectedRows = event.getParam('selectedRows');
        var aId;
        aId = selectedRows[0].Id;

        
        var action=cmp.get('c.getCon');
        action.setParams({accId : aId});
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                var rows1 = response.getReturnValue();
                console.log('rows1 ->> ' + rows1);
                cmp.set("v.data1", rows1);
            }
        });
        $A.enqueueAction(action);    
    },
    updateSelectedText1: function (cmp, event) {
        
        var selectedRows = event.getParam('selectedRows');
        var aId;
        aId = selectedRows[0].Id;
        alert('contact id: '+aId);  
    },    
    
})

Helper

({
    SearchHelper: function(component, event) {
        // show spinner message
         component.find("Id_spinner").set("v.class" , 'slds-show');
        var action = component.get("c.getAccounts");
        action.setParams({
            'searchKeyWord': component.get("v.searchKeyword")
        });
        action.setCallback(this, function(response) {
           // hide spinner when response coming from server 
            component.find("Id_spinner").set("v.class" , 'slds-hide');
            var state = response.getState();
            if (state === "SUCCESS") {
                var storeResponse = response.getReturnValue();
                
                // if storeResponse size is 0 ,display no record found message on screen.
                if (storeResponse.length == 0) {
                    component.set("v.Message", true);
                } else {
                    component.set("v.Message", false);
                }
                
                // set numberOfRecord attribute value with length of return value from server
                component.set("v.TotalNumberOfRecord", storeResponse.length);
                
                // set searchResult list with return value from server.
                //component.set("v.searchResult", storeResponse); 
                component.set("v.data", storeResponse); 
                //console.log('dddjjd '+JSON.stringify(component.get("v.searchResult")));
                
            }else if (state === "INCOMPLETE") {
                alert('Response is Incompleted');
            }else if (state === "ERROR") {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        alert("Error message: " + 
                                    errors[0].message);
                    }
                } else {
                    alert("Unknown error");
                }
            }
        });
        $A.enqueueAction(action);
    },
})

​​​​​​​