Fetching Contacts Via Lightning Component

ContactList.cmp

<aura:component controller="FetchContacts" implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global">
<aura:handler name="init" value="{!this}" action="{!c.fetchContactList}"/>
<aura:attribute name="contacts" type="Contact[]"/>
<aura:iteration items="{!v.contacts}" var="contact">
   <div class="card card-body" >
<ui:outputText aura:id="conId" value="{!contact.name}"/>
</div>
</aura:iteration>
</aura:component>

ContactList.Controller

({
fetchContactList : function(component, event, helper) {
   var action = component.get("c.getContacts");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {
                component.set("v.contacts", response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
  }
})

FetchContacts.cls

public class FetchContacts {
@AuraEnabled
  public static List<Contact> getContacts() {
      return [Select Id, Name, Email, Title, Phone From Contact];
   }
}