[SalesForce] Lightning Component not showing values

I am working on a simple lightning component to show a single Contact. Just to show a random Contact from the Org. I can see the values is coming from Salesforce server but not displaying on the component.

<aura:component Controller="SingleContact"  access="global" >
    <aura:attribute name="contact" type="Contact"></aura:attribute>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <div class = "titleBox">

         <div class = "tileBody">
            <div class = "tileTitle">{!v.contact.FirstName}  {!v.contact.LastName} </div>
            <div class = "tileDescription">
                {!v.contact.MailingStreet}
                {!v.contact.MailingCity} {!v.contact.MailingState}
                {!v.contact.MailingCountry} {!v.contact.MailingPostalCode}
            </div>
         </div>
    </div>  
</aura:component>

Here is the component Controller.

({
    doInit : function(component, event, helper) {
        var action = component.get("c.getContact")
        action.setCallback(this,function(response){
            console.log('---' + JSON.stringify (response.getReturnValue()));
            component.set("v.contact",response.getReturnValue());
            console.log('--value set-');
        });
        $A.enqueueAction(action);
    }
})

Here is the apex controller.

public class SingleContact {
    @AuraEnabled
    public Static Contact getContact(){
        return [select Id,Name,MailingStreet,MailingCity,
               MailingState,MailingCountry,MailingPostalCode from Contact Limit 1];
    }
}

I can see the value in the JSON.stringify but the component is coming as blank. Can't I set the values of 'contact" in the init. ?

Best Answer

Your code appears to be perfectly fine, except that you query the Name field, then specify the FirstName and LastName fields, and the rest of the fields are likely null (e.g. no address was specified). Changing your code as follows should fix your problem:

        <div class = "tileTitle">{!v.contact.Name} </div>
Related Topic