passing values to js Controller from Lightning component while calling it on mouse over event

Question

I have a lightning component from which I am retrieving contact records onto an aura:attribute which is as follows:

after retrieving the result from the controller I am printing it on component using aura:iteration which is as follows:

As you can see on the first tag I have used mouseover from where I am calling a js controller method ...

I want that method to be looked like this:

now the 'data' argument I want to pass while the method is called i.e., mouse is hovered on that and the data should be the name i.e., "{!data.name}"

where 'data' is the 'var' for the aura:iteration..

So how to send argument to js controller from component while calling from there only....

please help me its urgent

Answer 1

I don't think you can pass in custom arguments explicitly to javascript controller methods. the default arguments to lightning javascript methods are component, event and helper.

for any additional values to be passed, you might have to use aura:attributes or assign the components value attribute and then get that from the controller

so in you case you can have an attribute in your component markup which holds the data name

<aura:attribute name="dataName" type="String" />

and then access it in your controller method

mouseover : function(component){
      var dname = component.get("v.dataName");
      console.log('data = ' + dname);
}

or assign the iteration var to the value of inner component from which you are calling the controller method

<aura:iteration items="{!v.data}" var="d">
    <a value="{!d.name}" aura:id="mylink" onmouseover="{!c.mouseover}"></a>
</aura:iteration>

if plain html <a> is not working then consider uring <ui:outputUrl>

and then access it from the controller method

mouseover : function(component){
      var dname = component.find("mylink").get("v.value");
      console.log('data = ' + dname);
}

Answer 2

Even I don't think you can pass arguments in this manner. One more suggestion - Set the value of tag as data.name and access it using event

<a value="{!data.name}"></a>

mouseover : function(component,event){
          var dataValue = event.target.value;
          console.log('data = ' + dataValue);
}