Get Selected HTML or Lightning component in Aura Iterator

How to detect event from Lightning Component and HTML5 components in Aura Iterator

Coming from Visualforce background, most of us are well aware about repeater component. Same way, Lightning also offers iterator component.

Detecting Selected Lightning Component in Iterator

Usage is very simple, It is used to iterate over collection and render some HTML / Lightning component dynamically as shown below

1	<aura:component>

2	<aura:iteration items="1,2,3,4,5" var="item">

3	<meter value="{!item}"/>

4	</aura:iteration>

5	</aura:component>

In above example, each element in collection can be referred using variable “item”. Most of time we find ourselves in situation where we need to get value or component selected in iterator. As we don’t know upfront, how many items would be there, so identifying selected item at run time seems little bit tricky but believe me it easy.

Let’s dive into water and consider below code snippet of Lightning

1	<aura:iteration items="{!v.lstItem}" var="item">

2

3	<ui:inputText change="{!c.textChange}" class="slds-input slds-m-top--large" label="" value="{!item.companyName}"/>

4

5	</aura:iteration>

In above code, we have used standard Lightning component ui:inputText and onchange event, we want to find value entered in that text box.

Below is sample code snippet from client side controller

1	textChange: function(cmp, event,helper) {

2	var target = event.getSource();

3	var txtVal = target.get("v.value") ;

4	console.log('Selected Value is '+txtVal);

5

}

We have used event.getSource() method to detect component responsible to generate event. once component is found, we can use target.get(“v.value”). Aura components does not support HTML 5 data attributes and therefore we can not have any other information saved as attribute on components. If we need to store some other information, then need to come up with work around like using class, title or alt attributes.

Detecting Selected HTML Component in Iterator

If we need to store more than one value on element, Aura components could not be solution and we can move to HTML5 components. Lets consider that we have used HTML components in aura iterator tag

1	<aura:iteration items="{!v.lstItem}" var="item" indexVar="index">

2	<input data-selected-Index="{!index}" onchange="{!c.textChange}" type="text" value="{! item.companyName}" class="slds-input slds-m-top--large" />

3	</aura:iteration>

In above example, we have saved value along with index of component in data attribute supported by HTML 5. Index of component in aura:iteration can be referred using indexVar attribute. Related code snippet for client side controller will look like

1	textChange: function(cmp, event,helper) {

2	var target = event.target;

3	var dataEle = target.getAttribute("data-selected-Index");

4	console.log("v.selectedItem", "Component at index "+dataEle+" has value "+target.value);

5

}

Below is complete source code showing how to detect at run time that selected component is Lightning Component or HTML5 component

IteratorDemo.cmp

1	<aura:component >

2	<aura:attribute name="lstItem" type="Object[]" />

3	<aura:attribute name="selectedItem" type="String" default="Changed Text would be displayed here"/>

4	<aura:handler name="init" value="{!this}" action="{!c.initJSONData}"/>

5	<div class="slds-grid slds-wrap">

6	<div class="slds-col slds-size--1-of-2">

7	<div class="slds-box slds-box--small slds-theme--shade slds-text-align--center">

8	<h3 class="slds-text-heading--large">Iterator on Lightning Component</h3>

9	<aura:iteration items="{!v.lstItem}" var="item">

10	<ui:inputText change="{!c.textChange}" class="slds-input slds-m-top--large"label="" value="{!item.companyName}"/>

11	</aura:iteration>

12

</div>

13

</div>

14	<div class="slds-col slds-size--1-of-2">

15	<div class="slds-box slds-box--small slds-theme--shade slds-text-align--center">

16	<h3 class="slds-text-heading--large">Iterator on HTML Component</h3>

17	<aura:iteration items="{!v.lstItem}" var="item" indexVar="index">

18	<input data-selected-Index="{!index}" onchange="{!c.textChange}" type="text"value="{! item.companyName}" class="slds-input slds-m-top--large" />

19	</aura:iteration>

20

</div>

21

</div>

22	<div class="slds-col slds-align--absolute-center slds-size--2-of-2">

23	<div class="slds-size--1-of-2 slds-m-top--large slds-text-heading--large">

24	{!v.selectedItem}

25

</div>

26

</div>

27

</div>

28	</aura:component>

IteratorDemoController.js

1

({

2	initJSONData : function(component, event, helper) {

3	helper.initJSONData(component, event, helper);

4

},

5	textChange: function(cmp, event,helper) {

6	helper.textChange(cmp, event,helper);

7

}

8

})

IteratorDemoHelper.js

view source

print?

1

({

2	initJSONData : function(component, event, helper){

3	component.set("v.lstItem",helper.getSampleJSON());

4

5

},

6	getSampleJSON : function(){

7	return  [ { "companyName" : "Salesforce" } ,

8	{ "companyName" : "IBM" },

9	{ "companyName" : "Oracle" } ,

10	{ "companyName" : "Twitter" }]  ;

11

},

12	textChange: function(cmp, event,helper) {

13	if(event.getSource){

14	var target = event.getSource();

15	var txtVal = target.get("v.value") ;

16	cmp.set("v.selectedItem",txtVal);

17

}else{

18	var target = event.target;

19	var dataEle = target.getAttribute("data-selected-Index");

20	cmp.set("v.selectedItem", "Component at index "+dataEle+" has value "+target.value);

21

}

22

23

}

24

})