function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Deepak agarwal 9Deepak agarwal 9 

Passing List of Accounts to aura iteration and displaying them in component

Hi Folks,

I am having an apex class which is having AuraEnabled method which returns list of accounts to <aura:iteration >. I am not able to display the list in component.Code is very simple nothing complicated.
  
Need help ASAP.


<aura:component controller="Accounts">
    <aura:attribute name="Acc" type="Account[]" default="{'sObjectType':'Account',
                                                                         'Name':'',
                                                         'Id':''}"/>
    <aura:iteration items="{!v.Acc}" var="acc">
    <p>{!acc.Name}</p>
    </aura:iteration>
</aura:component>

//Server side controller
public with sharing class Accounts {
    @AuraEnabled
    Public Static List<Account> getAccount(){
  return  [Select Name,id from Account LIMIT 2];
      
    
}
}

 
Best Answer chosen by Deepak agarwal 9
Shivdeep KumarShivdeep Kumar
Hi Deepak,

Your are not using the client side controller.
Please try the below code and I am sure it will help you.
​// Your lightning component
<aura:component controller="ContactListController">
    <aura:attribute name="recordId" type="Contact" />
    <aura:attribute name="contacts" type="List" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
     
    
    <!-- Use the Apex model and controller to fetch server side data -->
    <table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer">
        
        <thead>          
            <tr class="slds-text-heading--small"> 
                <th scope="col"><span class="slds-truncate">Action  </span></th>
                <th scope="col"><span class="slds-truncate">Contact Id</span></th>
                <th scope="col"><span class="slds-truncate">Account Name</span></th>
                <th scope="col"><span class="slds-truncate">Name</span></th>
                <th scope="col"><span class="slds-truncate">Email</span></th>
                <th scope="col"><span class="slds-truncate">Phone</span></th>
                <th scope="col"><span class="slds-truncate">Action  </span></th> 
                
            </tr>
            
        </thead>
        
        
        <tbody>
            <aura:iteration items="{!v.contacts}" var="contact">
                <tr>
                   
                    <th scope="row">{!contact.Id}</th>
                    <td>{!contact.Account.Name}</td>                      
                    <td>{!contact.FirstName}   {!contact.LastName}</td>                
                    <td>{!contact.Email}</td>
                    <td>{!contact.Phone}</td>                     
                </tr>
            </aura:iteration>
        </tbody>
    </table>
    
</aura:component>

// your server side apex class
public class ContactListController {
	@AuraEnabled
   public static List<Contact> getContacts() {
       return [SELECT Id, AccountId, Account.Name,FirstName, LastName,MobilePhone, Phone,Email
       FROM Contact ORDER BY LastModifiedDate];
   }
}

// your client side side controller
({
    doInit : function(component, event, helper) {
        helper.getContacts(component);
    }
})

// your helper class based on controller
({
    getContacts : function(component) {
        var action = component.get("c.getContacts");
        
        //Set up the callback
        var self = this;
        action.setCallback(this, function(actionResult) {
            var state = actionResult.getState();
            if (component.isValid() && state === "SUCCESS") {
                component.set("v.contacts", actionResult.getReturnValue());
            }            
        });
        $A.enqueueAction(action);
    }
})

Please let me know if it helps you,

Thanks 
Shivdeep

All Answers

Shivdeep KumarShivdeep Kumar
Hi Deepak,

Your are not using the client side controller.
Please try the below code and I am sure it will help you.
​// Your lightning component
<aura:component controller="ContactListController">
    <aura:attribute name="recordId" type="Contact" />
    <aura:attribute name="contacts" type="List" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
     
    
    <!-- Use the Apex model and controller to fetch server side data -->
    <table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer">
        
        <thead>          
            <tr class="slds-text-heading--small"> 
                <th scope="col"><span class="slds-truncate">Action  </span></th>
                <th scope="col"><span class="slds-truncate">Contact Id</span></th>
                <th scope="col"><span class="slds-truncate">Account Name</span></th>
                <th scope="col"><span class="slds-truncate">Name</span></th>
                <th scope="col"><span class="slds-truncate">Email</span></th>
                <th scope="col"><span class="slds-truncate">Phone</span></th>
                <th scope="col"><span class="slds-truncate">Action  </span></th> 
                
            </tr>
            
        </thead>
        
        
        <tbody>
            <aura:iteration items="{!v.contacts}" var="contact">
                <tr>
                   
                    <th scope="row">{!contact.Id}</th>
                    <td>{!contact.Account.Name}</td>                      
                    <td>{!contact.FirstName}   {!contact.LastName}</td>                
                    <td>{!contact.Email}</td>
                    <td>{!contact.Phone}</td>                     
                </tr>
            </aura:iteration>
        </tbody>
    </table>
    
</aura:component>

// your server side apex class
public class ContactListController {
	@AuraEnabled
   public static List<Contact> getContacts() {
       return [SELECT Id, AccountId, Account.Name,FirstName, LastName,MobilePhone, Phone,Email
       FROM Contact ORDER BY LastModifiedDate];
   }
}

// your client side side controller
({
    doInit : function(component, event, helper) {
        helper.getContacts(component);
    }
})

// your helper class based on controller
({
    getContacts : function(component) {
        var action = component.get("c.getContacts");
        
        //Set up the callback
        var self = this;
        action.setCallback(this, function(actionResult) {
            var state = actionResult.getState();
            if (component.isValid() && state === "SUCCESS") {
                component.set("v.contacts", actionResult.getReturnValue());
            }            
        });
        $A.enqueueAction(action);
    }
})

Please let me know if it helps you,

Thanks 
Shivdeep
This was selected as the best answer
Deepak agarwal 9Deepak agarwal 9
Thanks Shivdeep..It worked..Thankyou very much..
 
harish reddy 37harish reddy 37
Hello Yadav, 
I am facing the same problem but I haven't figured it out yet. is it important to set up the call back in the helper?
Please help me.
thanks!!
harish reddy 37harish reddy 37
<aura:component implements="forceCommunity:availableForAllPageTypes" access="global" controller="StatusTabController" >
    <aura:attribute name="IIT_Courses__c" type="List" />
    <aura:attribute name="recordId" type="IIT_Courses__c" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
  
  <table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
    <thead>
      <tr class="slds-text-heading--label">
           <th scope="col"><span class="slds-truncate">Action  </span></th> 
        <th scope="col"><div class="slds-truncate" title=" Start_Date"> Start Date</div></th>
        <th scope="col"><div class="slds-truncate" title="Video_URL">Video URL</div></th>
           <th scope="col"><span class="slds-truncate">Action  </span></th> 
      </tr>
    </thead>
    <tbody>
      <!-- Use the Apex model and controller to fetch server side data -->
      <aura:iteration items="{!v.IIT_Courses__c}" var="course">
       <!-- <tr>
          <th scope="row"><div class="slds-truncate" title="{!course.Start_Date__c}">{!course.Start_Date__c}</div></th>
          <td><div class="slds-truncate" title="{!course.Video_URL__c}">{!course.Video_URL__c}</div></td>
          <td>
          </td>
        </tr>-->                       <tr>                 
                    <th scope="row">{!course.Video_URL__c}</th>
                                          
                    <td>{!course.Start_Date__c}</td>                
                                       
                </tr>
          

      </aura:iteration>
    </tbody>
  </table>
</aura:component>

({
  doInit: function(component, event, helper) {      
    // Fetch the account list from the Apex controller   
    helper.getIIT_Courses__c(component);
  }
})

({
  // Fetch the accounts from the Apex controller
  getIIT_Courses__cList: function(component) {
    var action = component.get('c.getIIT_Courses__cs');
                   var self = this;
        action.setCallback(this, function(actionResult) {
            var state = actionResult.getState();
            if (component.isValid() && state === "SUCCESS") {
                component.set("v.IIT_Courses__c", actionResult.getReturnValue());
            }            
        });
    $A.enqueueAction(action);
  }
 })

public class StatusTabController {
  @AuraEnabled
  public static List<IIT_Courses__c> getCourse() {
    return [SELECT Start_Date__c,Video_URL__c  FROM IIT_Courses__c ];
  }
}

IIT_courses__c was my custom object and Video_URL__c and Start_date__c are my fields that I wanted to display. I don'nt understand what is wrong in this code.
Shivdeep KumarShivdeep Kumar
Hi Harish,

Check out the below code and let me know if it help.
 
<aura:component implements="forceCommunity:availableForAllPageTypes" access="global" controller="StatusTabController" >
    <aura:attribute name="IIT_Courses" type="List" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
  
  <table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
    <thead>
      <tr class="slds-text-heading--label">
           <th scope="col"><span class="slds-truncate">Action  </span></th> 
        <th scope="col"><div class="slds-truncate" title=" Start_Date"> Start Date</div></th>
        <th scope="col"><div class="slds-truncate" title="Video_URL">Video URL</div></th>
         
      </tr>
    </thead>
    <tbody>
      <!-- Use the Apex model and controller to fetch server side data -->
      <aura:iteration items="{!v.IIT_Courses__c}" var="course">
                      <tr> 
<td></td>                
 <td>{!course.Start_Date__c}</td>    
                    <td>{!course.Video_URL__c}</td>
                </tr>
      </aura:iteration>
    </tbody>
  </table>
</aura:component>

({
  doInit : function(component, event, helper) {      
    // Fetch the account list from the Apex controller   
    helper.getIIT_Courses(component);
  }
})

({
  // Fetch the accounts from the Apex controller
  getIIT_Courses : function(component) {
    var action = component.get('c.getCourse');
                   var self = this;
        action.setCallback(this, function(actionResult) {
            var state = actionResult.getState();
            if (component.isValid() && state === "SUCCESS") {
                component.set("v.IIT_Courses", actionResult.getReturnValue());
            }            
        });
    $A.enqueueAction(action);
  }
 })

public class StatusTabController {
  @AuraEnabled
  public static List<IIT_Courses__c> getCourse() {
    return [SELECT Start_Date__c,Video_URL__c  FROM IIT_Courses__c ];
  }
}

Thanks
Shivdeep​
harish reddy 37harish reddy 37
Unfortunately, there are no result shivdeep.thanks!!