Aura:Iteration Example in Salesforce Lightning Component and Pass Data One Componet to Another Component

Apex Class:- IterationController 
public class IterationController {
@AuraEnabled
public static String getQuestionDetails() { 
map<String,String> mapDetails=new map<String,String>(); 
mapDetails.put('What is Your Last Name?','Text'); 
mapDetails.put('Are You Indian?','Boolean'); 
mapDetails.put('What is your Eye Color?','Text'); 
mapDetails.put('What was your first Nobel?','Text');
return JSON.serialize(mapDetails);
}
}
Lightning Component:- CustomIetrationCmp
<aura:component controller="IterationController" implements="flexipage:availableForAllPageTypes,lightning:actionOverride,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:appHostable">
<aura:attribute name="mydata" type="List"/>
<aura:handler name="init" value="{!this}" action="{!c.doinit}"/>
<table class="slds-table slds-table_bordered">
<thead>
<th scope="col">
<div class="slds-truncate slds-text-heading_small" title="Sl.No.">Sl.No.</div>
</th>
<th scope="col">
<div class="slds-truncate slds-text-heading_small" title="Question">Question</div>
</th>
<th scope="col">
<div class="slds-truncate slds-text-heading_small" title="DataType">DataType</div>
</th>
<th scope="col">
<div class="slds-truncate slds-text-heading_small" title="Answer the security Questions">Answer the security Questions</div>
</th>
</thead>
<tbody>
<aura:iteration items="{!v.mydata}" var="myData" indexVar="rowIndex">
<c:CustomTableListItem mydataRec="{!myData}" mydataindexVar="{!rowIndex+1}"/>
<!--tr>
<td>
{!rowIndex+1}.
</td>
<td>
<div class="slds-truncate" title="{!myData.Question}">{!myData.Question}</div>
</td>
<td>
<div class="slds-truncate" title="{!myData.DataType}">{!myData.DataType}</div>
</td>
<aura:if isTrue="{!myData.DataType=='Text'}">
<td>
<div class="slds-truncate">
<lightning:input data-selected-Index="{!index}" aur:id="AnsTesxtId" type="text" name="AnsTesxtId" class="slds-size_1-of-2" onchange="{!c.getAnsTesxt}" />
</div>
</td>
</aura:if>
<aura:if isTrue="{!myData.DataType=='Boolean'}">
<td>
<div class="slds-truncate">
<ui:inputCheckbox aura:id="checkboxID" change="{!c.onCheck}"/>
</div>
</td>
</aura:if>
</tr-->
</aura:iteration>
</tbody>
</table>
<div class="slds-float_right" style="margin-right:460px;">
<br/>
<lightning:button label="Submit" class="slds-button_brand" onclick="{!c.handleSelect}" />
</div>
</aura:component>
Lightning Component Controller:- CustomIetrationCmpController.JS
({
doinit : function(component, event, helper){
// debugger;
var action = component.get("c.getQuestionDetails");
action.setCallback(this, function(response){
var state = response.getState();
if (state === "SUCCESS") {
debugger;
var jsonData=[];
var resp=response.getReturnValue();
var jsonVal = JSON.parse(resp);
for(var val in jsonVal){
var item = {}
item ["Question"] =val;
item ["DataType"] =jsonVal[val];
jsonData.push(item);
}
component.set('v.mydata',jsonData);
}
});
$A.enqueueAction(action);
},
handleSelect: function (component, event, helper) {
debugger;
var arr = component.get('v.mydata');
},
getAnsTesxt: function (component, event, helper) {
debugger;
var src = event.getSource();
var AnsTesxtVal = src.get("v.value");
Console.log('>>>>AnsTesxtVal>>>>'+AnsTesxtVal);
},
onCheck: function(component, event, helper) {
debugger;
var src = event.getSource();
var CheckboxVal = src.get("v.value");
Console.log('>>>>CheckboxVal>>>>'+CheckboxVal);
}
})
Lightning Component:- CustomTableListItem
<aura:component >
<aura:attribute name="mydataRec" type="List"/>
<aura:attribute name="mydataindexVar" type="List"/>
<tr>
<td>
{!v.mydataindexVar}.
</td>
<td>
<div class="slds-truncate" title="{!v.mydataRec.Question}">{!v.mydataRec.Question}</div>
</td>
<td>
<div class="slds-truncate" title="{!v.mydataRec.DataType}">{!v.mydataRec.DataType}</div>
</td>
<aura:if isTrue="{!v.mydataRec.DataType=='Text'}">
<td>
<div class="slds-truncate">
<lightning:input aur:id="AnsTesxtId" type="text" name="AnsTesxtId" class="slds-size_1-of-2" onchange="{!c.getAnsText}" />
</div>
</td>
</aura:if>
<aura:if isTrue="{!v.mydataRec.DataType=='Boolean'}">
<td>
<div class="slds-truncate">
<ui:inputCheckbox aura:id="checkboxID" change="{!c.onCheck}"/>
</div>
</td>
</aura:if>
</tr>
</aura:component>
Lightning Component Controller:- CustomTableListItemController.Js
({
getAnsText: function (component, event, helper) {
debugger;
var src = event.getSource();
var AnsTextVal = src.get("v.value");
console.log('>>>>>>AnsTextVal>>>>'+AnsTextVal);
},
onCheck: function(component, event, helper) {
debugger;
var src = event.getSource();
var ChkboxVal = src.get("v.value");
console.log('>>>>>>ChkboxVal>>>>'+ChkboxVal);
}
})
Lightning App:- CustomIterationApp
<aura:application extends="force:slds" >   
<c:CustomIetrationCmp/>
</aura:application>
OutPut:-

Leave a Reply