[SalesForce] Get data from inner component present inside aura iteration in parent component

I want to get data from child component in parent component, child component is present inside inside auar:iteration in parent component and elements are rendered in child component using aura:if. I have provided aura:id to the child component(inputComp) and also to elements in child component(input). I am trying to get data using component.find("inputComp")[i].find("input").get("v.value"); but it's giving following error

Action failed: c:dynamicSurvey$controller$saveData [component.find(…)[i].find(…).get is not a function]
Failing descriptor: {c:dynamicSurvey$controller$saveData}

Parent component

 <div class="slds-box slds-theme_default">
            <aura:iteration items="{!v.configurations}" var="config" indexVar="index">
                <c:inputComponent survey="{!v.survey}" configuration="{!config}" picklistMap1="{!v.picklistMap}" aura:id="inputComp" index="{!index}"/>
            </aura:iteration>
        </div>

        <div class="slds-form-element__control">
            <div class="slds-clearfix">
                <div class="slds-float_left slds-p-top_x-small slds-p-bottom_x-small">
                    <div class="slds-align_absolute-center"><span class="red">{!v.fhiErrorMessage}</span></div>
                </div>
                <div class="slds-float_right slds-p-top_x-small slds-p-bottom_x-small">
                    <lightning:button class="slds-button slds-button_neutral" onclick="{!c.saveData}" label="Save" />
                </div>
            </div>
        </div>

Parent component Controller

saveData : function(component, event, helper){
        var configurations = component.get("v.configurations");
        //console.log(configurations);
        for(var i=0; i<configurations.length; i++){
            var input = component.find(inputComp)[i].find("input").get("v.value");
            console.log(input);
        }
    }

Inner Component

<aura:if isTrue="{!v.configuration.Data_Type__c=='text'}">
        <div class="slds-form-element__control slds-m-top_xx-small slds-m-bottom_xx-small slds-p-bottom_small">
            <ui:inputText label="{!v.configuration.Field_Label__c}" class="slds-input " value="" aura:id="input"/>
        </div>
    </aura:if>

    <aura:if isTrue="{!v.configuration.Data_Type__c=='number'}">
        <div class="slds-form-element__control slds-m-top_xx-small slds-m-bottom_xx-small slds-p-bottom_small">
            <ui:inputNumber label="{!v.configuration.Field_Label__c}" class="slds-input " value="" aura:id="input"/>
        </div>
    </aura:if>

    <aura:if isTrue="{!v.configuration.Data_Type__c=='textarea'}">
        <div class="slds-form-element__control slds-m-top_xx-small slds-m-bottom_xx-small slds-p-bottom_small">
            <ui:inputTextArea label="{!v.configuration.Field_Label__c}" class="slds-input " value="" aura:id="input"/>
        </div>
    </aura:if>

    <aura:if isTrue="{!v.configuration.Data_Type__c=='picklist'}">
        <div class="slds-form-element__control slds-m-top_xx-small slds-m-bottom_xx-small slds-p-bottom_small">
            <ui:inputSelect label="{!v.configuration.Field_Label__c}" class="slds-input" >
                <aura:iteration items="{!v.picklistOptions}" var="level">
                    <ui:inputSelectOption text="{!level}" label="{!level}" aura:id="input"/>
                </aura:iteration>
            </ui:inputSelect>
        </div>
    </aura:if>

Best Answer

I don't think this is appropriate way to do so in lightning.

One way to do say by firing a event from inner component whenever the value changes in inner component. You can fire event with both value and index and store that information in outer component.

Another way to do so is by using double binding principle of lightning.

<aura:if isTrue="{!v.configuration.Data_Type__c=='text'}">
        <div class="slds-form-element__control slds-m-top_xx-small slds-m-bottom_xx-small slds-p-bottom_small">
            <ui:inputText label="{!v.configuration.Field_Label__c}" class="slds-input " value="{!v.configuration.value}" aura:id="input"/>
        </div>
    </aura:if>

    <aura:if isTrue="{!v.configuration.Data_Type__c=='number'}">
        <div class="slds-form-element__control slds-m-top_xx-small slds-m-bottom_xx-small slds-p-bottom_small">
            <ui:inputNumber label="{!v.configuration.Field_Label__c}" class="slds-input " value="{!v.configuration.value}" aura:id="input"/>
        </div>
    </aura:if>

Now value of each inner component will get set in there configuration object.

saveData : function(component, event, helper){
        var configurations = component.get("v.configurations");
        //console.log(configurations);
        for(var i=0; i<configurations.length; i++){
            console.log(configurations[i].value);
        }
    }
Related Topic