0

I have been practicing the Lightning for a while now and I have been working on this lightning module in which i need to show contact details.

Below is the apex controller class :-

public class ContactListController 
{
    @AuraEnabled
    public static list<Contact> getContactList()
    {
        list<contact> contactList = new list<contact>([select id,name,firstname,lastname,email,phone from contact where email != null]);
        return contactList;
    }
}

Below is the component code:-

<aura:component controller="ContactListController">
    <aura:attribute name="contactList" type="contact[]"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:iteration items="{!v.contactList}" var="con">
        {!con.email}<br></br> 
        {!con.phone}
    </aura:iteration>
</aura:component>

Below is the JS controller code :-

({
    doInit : function(component, event, helper) 
    {
        var action = component.get('c.getContactList');
        action.setParams({});
        action.setCallback(this,function(response)
                           {
                               var responseValue = response.getReturnValue();
                               console.log('Response Value',responseValue);
                               component.set('v.contactList',responseValue)
                           }
                          );
        $A.enqueueAction(action);
    }
})

Below is the application code :-

<aura:application extends="force:slds">
    <c:ContactList/>
</aura:application>

Once i run the application, i do not see any output and all i see is the blank page. I am expecting the output as below :- Output Expecting

But my screen comes totally blank with no output on the screen. I have been stuck with this for past two days and i have rechecked my code but nothing works. Please help me out!!!

Thanks in Advance, Ali

0

1 Answer 1

1

No need to set params since your apex Method does not have any parameters

  doInit : function(component, event, helper) 
    {
        var action = component.get('c.getContactList');
        
        action.setCallback(this,function(response)
                           {
                               var responseValue = response.getReturnValue();
                               console.log('Response Value',responseValue);
                               component.set('v.contactList',responseValue)
                           }
                          );
        $A.enqueueAction(action);
    }

also you will need to use correct name to access the value the response you will get will we like this

Email: "joe.smith@ursus-sample.com"
FirstName: "Joe"
Id: "0030o00002eDvqVAAS"
LastName: "Smith"
Name: "Joe Smith"
Phone: "(123) 456-6788"

so you will need to use "Email" not "email" like this

 <aura:iteration items="{!v.contactList}" var="con">
        {!con.Email}<br></br> 
        {!con.Phone}
    </aura:iteration>
1
  • Thanks for such a quick response!!! I tried your suggestion and it totally worked for me and I have learnt a very important thing.
    – SFDC Alex
    Jul 31, 2020 at 14:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.