aura:iteration

In this blog, I am going to show how to use the aura:iteration to renders a view of a collection of items. aura:iteration iterates over a collection of items and renders the body of the tag for each item. The Below are the different examples to show how you can use iteration.

Simple iteration

In this example, we are iterating over the array of String.

<aura:component>
    <aura:attribute name="items" type="String[]" default="['red','green','blue']"/>
    <aura:iteration items="{!v.items}" var="item">
        <ul>
            <li>{!item}</li>
        </ul>
    </aura:iteration>
</aura:component>

Nested Iteration

The following code nested iteration

<aura:component>
    <aura:attribute name="items" type="String[]" default="['color','color','color']"/>
    <aura:attribute name="innerData" type="String[]" default="['red','green','blue']"/>
    
    <ul>
        <aura:iteration items="{!v.items}" var="outer" indexVar="index">
            <li>{!outer}</li>
            <ul>
                <aura:iteration items="{!v.innerData}" var="inner" indexVar="index">
                    <li>        {!inner}</li>
                </aura:iteration>
            </ul>
            
        </aura:iteration>
    </ul>
    
</aura:component>

Object iteration

The following example shows iteration over the Javascript object

<aura:component>
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    <aura:attribute name="data" type="Object"/>
    <aura:iteration items="{!v.data}" var="item">
        {!item.fieldName} -- {!item.newValue} <br/>
    </aura:iteration>
</aura:component>

({
    init: function (cmp) {
        var changes = [
            {
                "fieldName": "Name",
                "newValue": "Burlington Co of America",
                "oldValue": "Burlington Corp of America"
            },
            {
                "fieldName": "Revenue",
                "newValue": "$500,000,000.00",
                "oldValue": "$500,000,000.00"
            }
        ];
        cmp.set('v.data', changes);
    }
})

Wrapper Class Iteration

The Following Example shows how to iterate   the wrapper class collections

public with sharing class WrapperController {
    @AuraEnabled
    public static List<WrapperClass> getList() {
        List<WrapperClass> wrapperIns = new List<WrapperClass>();
        for(Integer i=0 ; i<10 ;i++){
            wrapperIns.add(new WrapperClass('Name'+i , 'Value'+i));
        }
        
        return wrapperIns ;
    }
    
    public class WrapperClass{
        public WrapperClass(String name , String value){
            this.name = name ; 
            this.value = value ;
        }
        @AuraEnabled
        public String name {get;set;}
        @AuraEnabled
        public String value {get;set;}
        
        
    }
}

<aura:component controller="WrapperController">
    <aura:attribute name="Wrapper" type="WrapperController[]"/>
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    <aura:iteration items="{!v.Wrapper}" var="item">
        {!item.name} -- {!item.value} <br/>
    </aura:iteration>
</aura:component>

({
    init: function (cmp) {
        var action = cmp.get("c.getList");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                cmp.set('v.Wrapper', response.getReturnValue());
            }
        });
        $A.enqueueAction(action);  
    }
})

Server Side Controller 

The following example shows how to iterate the server-side data

public with sharing class ContactController {
    @AuraEnabled
    public static List<Contact> getContacts() {
        return [Select Id, FirstName, LastName, Email, Phone From Contact ];
    }
}

<aura:component controller="ContactController">
    <aura:attribute name="contacts" type="Contact[]"/>
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    <aura:iteration items="{!v.contacts}" var="contact">
        {!contact.LastName} -- {!contact.FirstName} <br/>
    </aura:iteration>
</aura:component>

({
    init: function (cmp) {
        var action = cmp.get("c.getContacts");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                cmp.set('v.contacts', response.getReturnValue());
            }
        });
        $A.enqueueAction(action);  
    }
})

Iteration Index

The Following code shows how to get the index of iteration position.

<aura:component>
    
    <aura:attribute name="items" type="List" default="[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]"/>
    <aura:attribute name="setIndexesInInit" type="Boolean" default="true" />
    <aura:attribute name="start" type="Object" default="0"/>
    <aura:attribute name="end" type="Object" default="10"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    
    <aura:iteration aura:id="iteration"
                    items="{!v.items}"
                    var="var"
                    indexVar="idx"
                    start="{!v.start}"
                    end="{!v.end}">
        <ul>
            <li> Index  {!idx} And Value is  {!var}</li>
        </ul>
    </aura:iteration>
    
    
    
</aura:component>