Record iteration in lightning component

We are going to show the Salesforce record using the Aura iteration. here we are going to list out records using lightning component and apex controller.

aura:iteration iterates the collection of data items and renders to the frontend. Backend data changes are rerendered automatically on the web page. It also supports iterations containing components that are created exclusively on the client-side or components that have server-side dependencies.

Step for Iteration

Here we are going to iterate contact records

STEP 1 : Create Apex Controller

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

STEP 2 : Create component file

<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);  
    }
})

Now check your component it will iterate your contact records 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *