Lightning Client Side Iteration and Map :


This lesson teaches about various attribute types in lightning

Generally  list or Map of data are returned from apex , but for this example i have used hardcoded value in js and focused more on how to set different attribute values and iterate data in those attributes

The doInit is an default salesforce handler , which can be used to load data in lightning component
It functions in the same way as constructor

Below is the sample program for the same:


Create a lightning component with the below markup code and name the component as DemoClientSideJSAdvAttributes

<!--


 * created by 		:		Shiva RV
 * Date				:		14-10-2018
 * Description		:		Attributes like Object , List ,Map will be covered here
  
-->

<aura:component >
    <aura:attribute type="String" name="egStringData"></aura:attribute>
    <aura:attribute type="Object" name="egObjectData"></aura:attribute>
    <aura:attribute type="Map" name="egMapData"></aura:attribute>
    <aura:attribute type="List" name="egListData"></aura:attribute>
    <aura:attribute type="Set" name="egSetData" ></aura:attribute>

    <!--handler Start -->
    <!-- it's a standard handler behaviour in lightning , the action method is automatically
		called onLoading of this component -->
	<aura:handler name="init" value="{!this}" action="{!c.doInit}"></aura:handler>	
    <!-- handler end -->
    
    <h1> String Variable Example</h1>
    {!v.egStringData}
    <br/>
    
    <h1>Object Variable Example</h1>
    <table>
    <tr>
    	<th>Label</th>
    	<th>Value</th>
    </tr>
    <tr>
        <td>Name</td>
    	<td>{!v.egObjectData.name}</td>
    </tr>
    <tr>
        <td>Proffession</td>
    	<td>{!v.egObjectData.proffession}</td>
    </tr>
    <tr>
        <td>Age</td>
    	<td>{!v.egObjectData.age}</td>
    </tr>
    </table>
    <br/>
    
    <h1> Map Variable Example</h1>
<table>
    <tr>
    	<th>Label</th>
    	<th>Value</th>
    </tr>
    <tr>
        <td>Name</td>
    	<td>{!v.egMapData.name}</td>
    </tr>
    <tr>
        <td>Proffession</td>
    	<td>{!v.egMapData.proffession}</td>
    </tr>
    <tr>
        <td>Age</td>
    	<td>{!v.egMapData.age}</td>
    </tr>
    </table>

    <br/>
    
    <h1> List Variable Example</h1>
    <br/>
    <!-- Aura:Iteration is neccessary to list thorugh listData -->
    <ul>
    <aura:iteration items="{!v.egListData}" var="indListData">
        <li>
    {!indListData}
            </li>
    </aura:iteration>
    </ul>
    <br/>
    
    <!-- set is unordered unlike list and doesn't enforce unique value if set by js -->
    <h1> Set Variable Example</h1>
    <br/>
    <!-- Aura:Iteration is neccessary to list thorugh listData -->
    
    <ul>
    <aura:iteration items="{!v.egSetData}" var="indSetData">
        <li>
    {!indSetData}
            </li>
    </aura:iteration>
    </ul>
    <br/>
</aura:component>
 Js controller code :
({
	doInit : function(component, event, helper) {
        //string setting
        
		component.set("v.egStringData","Hello World !");
        
        //setting object default Data
        var demObject =new Object();
       	    demObject.name= 'shiva';
        	demObject.proffession='Salesforce Developer';
        	demObject.age=17;
        component.set("v.egObjectData",demObject);
        
        //setting Map default Value
        var nameVar='shiva';
        var proffessionVar='Salesforce Developer';
        var ageVar=25;
        var demMap ={'name': nameVar,
                     'proffession' :proffessionVar,
                     'age' :ageVar
                    };
        component.set("v.egMapData",demMap);
        
        //setting List default Value
        var arrData=[];
        arrData.push('Banana');
        arrData.push('Apple');
        arrData.push('Strawberry');
        arrData.push('Mulberry');
        arrData.push('Raspberry');
        arrData.push('Raspberry');

        component.set("v.egListData",arrData);
        
         //setting Set default Value
        
        var setData=["Banana","Apple","Strawberry","Mulberry","Raspberry","Raspberry"];
        component.set("v.egSetData",setData);
		
        
	}
})
Below is the hello world App code:
<!--


 * created by 		:		Shiva RV
 * Date				:		13-10-2018
 * Description		:		Hello World Lighting App
  
-->

<aura:application extends="force:slds">
	<!--this is the lightning app where you can place html codes , associate js code
		also can embed lightning component to it -->
   
    <!-- All Attribute in lightning with client side hardcoded data-->
		<c:DemoClientSideJSAdvAttributes></c:DemoClientSideJSAdvAttributes> 
    
</aura:application>
Output:

Key Notes :
*To Iterate through map , it must be convert to an array of objects
*For some reasons set doesn't check for unique contraint if value is set through js for strings