Unable to view data on Lightning component but can View in console log

Question

I am relatively new to Lightning and trying to learn it via one of the youtube tutorials and used same code for practice but I am not able to see the data on my Lightning component page. I could not find the reason when the code is exactly the same. Please help. Sharing my component, aura enabled method and JS action code for initialising data on page load. Apex Class:

public class contactlist {
@Auraenabled
public static List<contact> getcontactlist(){
    List<contact> conlist= New List <contact>([Select ID, Name,lastname,firstname,phone,email from contact where email != null]);
    return conlist;
}}

Component code: 
<aura:component controller="contactlist">
<aura:attribute name="contList" type="contact[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:iteration items="{!v.contList}" var="con">
    {!con.Firstname}
    {!con.lastname}
    {!con.phone}
    {!con.email}
</aura:iteration>
</aura:component>

JS Controller code:
({
doInit : function(component, event, helper) {
    var action= component.get('c.getcontactlist');
    action.setCallback(this,function(response){
        var responsevalue= response.getReturnValue();
        console.log('responsevalue',responsevalue );
        component.set('v.contList',responsevalue);
        },'SUCCESS');

    $A.enqueueAction(action,false);     
}})

Answer 1

Check to see if the field names match along with the case .

For instance your lastname should be replaced with Lastname as below .

Compare your data from console.log with the component reference, I was able to print the same by changing lastname to LastName.

      <aura:iteration items="{!v.contList}" var="con">        
         {!con.FirstName}
         {!con.LastName}
         {!con.phone}
        {!con.Email}
     </aura:iteration>