Not able to see the lightning output

Question

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 :-

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

Answer 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: "[email protected]"
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>