[SalesForce] Passing parameter from component to javascript controller

I have been looking for a way to pass a parameter from a Lightning component's aura:iteration to a javascript controller. I have searched for a solution but have not been able to find one for Aura, only for Visualforce. Surely the authors of Aura have considered something as basic as passing parameters from html, so what am I missing? The code below is what I would expect to work, but doesn't. Thanks for your help.

Inside my component

<aura:attribute name="monkeys" type="List" />

<aura:iteration items="{!v.monkeys}" var="monkey">
    <span onclick="{!c.getMonkeyLove({!monkey.love})}">{!monkey.love}</span>
</aura:iteration>

Inside my controller

getMonkeyLove : function (component, event, helper, data) {
    console.log(data); //Bananas
}

Best Answer

You can add data-* attributes to span like this:

 <span data-love="{!monkey.love}" onclick="{!c.getMonkeyLove}">{!monkey.love}</span>

In controller:

  getMonkeyLove: function(cmp,event,helper){
    var monkeyLove = event.getSource().getElement().getAttribute('data-love');
  }

Related Solutions

[SalesForce] Aura: init of child component executes before parent components init, alternate approach

In Component initialization child component Init event is fired before parent Init event.Use<aura:if> tag to check all required attributes before creating component.

<aura:component controller="xyz" implements="force:appHostable">
  <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
  <aura:attribute name="query" type="String"/>

  <aura:if isTrue="{!v.query}">
    <c:childComponent queryParam="{!v.query}" />
  </aura:if>
</aura:component>

[SalesForce] Can lightning component attribute of type aura component have references to attributes from the same component

I read the documentation you mentioned in the comments and it says attribute of type Aura.Component[] is called a facet. Then I checked the documentation about Component facet and came up with the below working example on how to use the attribute type List in other attribute of type Aura.Component[]:

HelloWorld.cmp

<aura:component implements="force:appHostable">
    <aura:attribute name="bar" type="Aura.Component[]">
    </aura:attribute>
    {!v.bar}
</aura:component>

HellWorld.app:

<aura:application extends="force:slds">
    <aura:attribute name="foo" type="List" default="['red','blue','green']"/>
    <c:HelloWorld>
        <aura:set attribute="bar">
            <aura:iteration items="{!v.foo}" var="item">
                <p><aura:text value="{!item}"></aura:text></p>
            </aura:iteration>
        </aura:set>
    </c:HelloWorld>
</aura:application>

Output:

UPDATE:

I did not work much on Lightning but I was curious on how to solve the issue you are talking about in comments so I came up with this example:

HelloWorld.cmp

<aura:component implements="force:appHostable">
    <aura:attribute name="bar" type="Aura.Component[]" access="global">
    </aura:attribute>
    <aura:attribute name="baz" type="Aura.Component[]" access="global">
    </aura:attribute>    
    <aura:attribute name="componentNumber" type="String" access="global">
    </aura:attribute>
    Below are the contents of {!v.componentNumber} component: <br></br>
    <div style="background-color:red">{!v.bar}</div>
    <div style="background-color:yellow">{!v.baz}</div>
    <div style="background-color:green">{!v.body}</div>
</aura:component>

HelloWorldApp.app

<aura:application extends="force:slds">

    <aura:attribute name="foo1" type="List" default="['red','blue','green']"/>
    <aura:attribute name="foo2" type="List" default="['Orange','Apple','Mango']"/>

    <c:HelloWorld aura:id="first" componentNumber="1">
        <aura:set attribute="bar" >
            <aura:iteration items="{!v.foo1}" var="item" indexVar="i">
                <p><aura:text value="{! i + ':' + item}"></aura:text></p>
            </aura:iteration>
        </aura:set>
    </c:HelloWorld>

    <c:HelloWorld aura:id="second" componentNumber="2">
        <aura:set attribute="bar" >
            <aura:iteration items="{!v.foo2}" var="item" indexVar="i">
                <p><aura:text value="{! i + ':' + item}"></aura:text></p>
            </aura:iteration>
        </aura:set>     
    </c:HelloWorld>

    <div></div>

    <ui:button  label="Update first component with second component body" 
                press="{!c.updateFirstCmp}"/>

</aura:application>

HelloWorldAppController.js:

({
    updateFirstCmp : function(component, event, helper) {
        debugger;
        var secondCmpBdy = component.find('second').get('v.bar');
        // Setting the attribute of type Aura.Component[] of first HelloWorld Component from 
        // second HelloWorld component attribute of type Aura.Component[]
        component.find('first').set('v.baz',secondCmpBdy);
        // Setting the body(type Aura.Compoent[] as per docs) of first HelloWorld Component 
        // from second HelloWorld component attribute of type Aura.Component[]
        component.find('first').set('v.body',secondCmpBdy);
    }   
})

Output:

After clicking on the button: (second component still exists on the page while the content is copied to first component)

I am learning a lot from this question :)

Best Answer

Related Solutions

[SalesForce] Aura: init of child component executes before parent components init, alternate approach

[SalesForce] Can lightning component attribute of type aura component have references to attributes from the same component

Related Topic