Coming from Visualforce background, most of us are well aware about repeater component. Same way, Lightning also offers iterator component.<\/p>\n
Usage is very simple, It is used to iterate over collection and render some HTML \/ Lightning component dynamically as shown below<\/p>\n
\r\n<aura:component>\r\n <aura:iteration items="1,2,3,4,5" var="item">\r\n <meter value="{!item}"\/>\r\n <\/aura:iteration>\r\n<\/aura:component>\r\n<\/pre>\nIn 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.<\/p>\n
Let’s dive into water and consider below code snippet of Lightning<\/p>\n
\r\n\r\n<aura:iteration items="{!v.lstItem}" var="item">\r\n\r\n<ui:inputText change="{!c.textChange}" class="slds-input slds-m-top--large" label="" value="{!item.companyName}"\/>\r\n\r\n<\/aura:iteration>\r\n\r\n<\/pre>\nIn above code, we have used standard Lightning component\u00a0ui:inputText<\/strong> and onchange event, we want to find value entered in that text box.<\/p>\nBelow is sample code snippet from client side controller<\/p>\n
\r\ntextChange: function(cmp, event,helper) { \r\n var target = event.getSource(); \r\n var txtVal = target.get("v.value") ;\r\n console.log('Selected Value is '+txtVal); \r\n }\r\n<\/pre>\nWe have used\u00a0event.getSource()\u00a0<\/strong>method to detect component\u00a0responsible to generate event. once component\u00a0is found, we can use\u00a0target.get(“v.value”)<\/strong>. Aura components does not support HTML 5 data attributes<\/strong> 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.<\/p>\nDetecting\u00a0Selected HTML\u00a0Component in Iterator<\/strong><\/h3>\nIf we need to store more than one value on element, Aura components\u00a0could not be solution and we can move to HTML5 components. Lets consider that we have used HTML components in aura iterator tag<\/p>\n
\r\n\r\n<aura:iteration items="{!v.lstItem}" var="item" indexVar="index">\r\n<input data-selected-Index="{!index}" onchange="{!c.textChange}" type="text" value="{! item.companyName}" class="slds-input slds-m-top--large" \/>\r\n<\/aura:iteration>\r\n\r\n<\/pre>\nIn above example, we have saved value along with index of component in data attribute supported by HTML 5. Index of component in aura:iteration<\/strong> can be referred using\u00a0indexVar\u00a0<\/strong>attribute. Related code snippet for client side controller will look like<\/p>\n\r\n\r\ntextChange: function(cmp, event,helper) {\r\n var target = event.target;\r\nvar dataEle = target.getAttribute("data-selected-Index");\r\nconsole.log("v.selectedItem", "Component at index "+dataEle+" has value "+target.value);\r\n}\r\n\r\n<\/pre>\nBelow is complete source code showing how to detect at run time that selected component is Lightning Component or HTML5 component<\/p>\n
IteratorDemo.cmp<\/span><\/p>\n\r\n<aura:component > \r\n <aura:attribute name="lstItem" type="Object[]" \/>\r\n <aura:attribute name="selectedItem" type="String" default="Changed Text would be displayed here"\/> \r\n <aura:handler name="init" value="{!this}" action="{!c.initJSONData}"\/> \r\n<div class="slds-grid slds-wrap"> \r\n<div class="slds-col slds-size--1-of-2"> \r\n<div class="slds-box slds-box--small slds-theme--shade slds-text-align--center"> \r\n<h3 class="slds-text-heading--large">Iterator on Lightning Component<\/h3> \t\r\n <aura:iteration items="{!v.lstItem}" var="item"> \r\n <ui:inputText change="{!c.textChange}" class="slds-input slds-m-top--large" label="" value="{!item.companyName}"\/> \r\n <\/aura:iteration> \r\n <\/div> \r\n <\/div> \r\n<div class="slds-col slds-size--1-of-2"> \r\n<div class="slds-box slds-box--small slds-theme--shade slds-text-align--center"> \r\n<h3 class="slds-text-heading--large">Iterator on HTML Component<\/h3> \r\n <aura:iteration items="{!v.lstItem}" var="item" indexVar="index"> \r\n <input data-selected-Index="{!index}" onchange="{!c.textChange}" type="text" value="{! item.companyName}" class="slds-input slds-m-top--large" \/> \r\n <\/aura:iteration> \r\n <\/div> \r\n <\/div> \r\n<div class="slds-col slds-align--absolute-center slds-size--2-of-2"> \r\n<div class="slds-size--1-of-2 slds-m-top--large slds-text-heading--large">\r\n \t{!v.selectedItem} \r\n <\/div> \r\n <\/div> \r\n <\/div>\r\n<\/aura:component>\r\n<\/pre>\nIteratorDemoController.js<\/span><\/p>\n\r\n({ \r\n initJSONData : function(component, event, helper) {\r\n\t\thelper.initJSONData(component, event, helper);\r\n\t},\r\n textChange: function(cmp, event,helper) { \r\n helper.textChange(cmp, event,helper); \r\n }\r\n})\r\n<\/pre>\nIteratorDemoHelper.js<\/span><\/p>\n\r\n({ \r\n initJSONData : function(component, event, helper){\r\n component.set("v.lstItem",helper.getSampleJSON());\r\n \r\n },\r\n getSampleJSON : function(){\r\n return [ { "companyName" : "Salesforce" } ,\r\n { "companyName" : "IBM" },\r\n { "companyName" : "Oracle" } ,\r\n { "companyName" : "Twitter" }] ; \r\n },\r\n textChange: function(cmp, event,helper) { \r\n if(event.getSource){\r\n var target = event.getSource(); \r\n var txtVal = target.get("v.value") ;\r\n cmp.set("v.selectedItem",txtVal); \r\n }else{\r\n var target = event.target; \r\n var dataEle = target.getAttribute("data-selected-Index"); \r\n cmp.set("v.selectedItem", "Component at index "+dataEle+" has value "+target.value); \r\n }\r\n \r\n }\r\n})\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"How to detect event from Lightning Component and HTML5 components in Aura Iterator<\/p>\n","protected":false},"author":1,"featured_media":5780,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[9],"tags":[311],"class_list":["post-5751","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-salesforce","tag-lightning-component"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/09\/Get-Selected-Item-from-Aura-Iterator-Component-in-Lightning.gif?fit=548%2C432&ssl=1","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":4287,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/learning-lightning-component-trailhead-way\/","url_meta":{"origin":5751,"position":0},"title":"Learning Lightning Component – Trailhead way","author":"Jitendra","date":"March 19, 2015","format":false,"excerpt":"In Previous article, I\u00a0have introduced what is Trailhead and why employer should start using it to train Salesforce developers and Admins. At the time of writing this article, there are already 16 modules to be learned from it. Recently Salesforce has added some more awesome tutorial\u00a0and \u00a0In this article, I\u2026","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Learn Lightning Component Trailhead way","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/03\/Learn-Lightning-Trailhead-way-1024x576.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/03\/Learn-Lightning-Trailhead-way-1024x576.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/03\/Learn-Lightning-Trailhead-way-1024x576.jpg?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":4461,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/getting-started-with-basics-of-lightning-component\/","url_meta":{"origin":5751,"position":1},"title":"Getting started with basics of Lightning Component","author":"Jitendra","date":"May 19, 2015","format":false,"excerpt":"As you might already know\u00a0that next big change in Salesforce is introduction to lightning components. As technology is changing rapidly and to take advantage of cutting edge innovations in web technology, Salesforce doesn't want to stay behind. If we see trend, all major platform has introduced component based design like\u2026","rel":"","context":"In "Lightning"","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"Getting started with Lightning component Output","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Getting-started-with-Lightning-component-Output.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":6920,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/data-exchange-between-aura-lightning-web-components-lwc-and-visualforce\/","url_meta":{"origin":5751,"position":2},"title":"Event Handling between Aura, Lightning Web Components (LWC) and Visualforce","author":"Jitendra","date":"October 16, 2019","format":false,"excerpt":"How to use Lightning Message Services for event handling between Lightning Web Components, Aura Components and Visualforce","rel":"","context":"In "Lightning"","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"Salesforce Lightning Message Service","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":5970,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/generic-and-responsive-table-component-in-salesforce-lightning\/","url_meta":{"origin":5751,"position":3},"title":"Generic and Responsive Table Component in Salesforce Lightning","author":"Jitendra","date":"March 31, 2017","format":false,"excerpt":"Complete Source code to create generic and responsive Table component in Salesforce Lightning","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"JSON format for responsive datagrid Lightning component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/03\/JSON-format-for-responsive-datagrid-Lightning-component.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":4493,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/create-collapsible-panel-component-in-lightning\/","url_meta":{"origin":5751,"position":4},"title":"Salesforce Lightning Component – expand and collapsable panel example","author":"Jitendra","date":"May 22, 2015","format":false,"excerpt":"How to use aura:facet component and Learn creating expand and collapsable reusable lightning component in Salesforce","rel":"","context":"In "Lightning"","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"Lightning CollapsiblePanel Component - Expanded","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Expanded.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Expanded.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Expanded.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Expanded.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":5885,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-spring-17-release-my-favorite-features\/","url_meta":{"origin":5751,"position":5},"title":"Salesforce Spring 17 release – My favorite features","author":"Jitendra","date":"January 27, 2017","format":false,"excerpt":"List of my favorite features in Salesforce Spring 17","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Salesforce Apex Batch job - Spring 17","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/01\/Salesforce-Apex-Batch-job-Spring-17.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/01\/Salesforce-Apex-Batch-job-Spring-17.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/01\/Salesforce-Apex-Batch-job-Spring-17.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/01\/Salesforce-Apex-Batch-job-Spring-17.png?resize=700%2C400&ssl=1 2x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5751","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=5751"}],"version-history":[{"count":8,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5751\/revisions"}],"predecessor-version":[{"id":5785,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5751\/revisions\/5785"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media\/5780"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=5751"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=5751"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=5751"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}