[SalesForce] Query inside @AuraEnabled is not able to fetch parent

I tried to get the contact name and parent Account from a query SELECT Name, Account.Name FROM Contact but Account.Name returns only id not the name of the parent account.
My code below
Component 

<aura:component controller="ContactsController">
<aura:attribute name="contacts" type="List" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />

<table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
     <thead>
          <tr class="slds-text-heading--label">
                <th scope="col"><div class="slds-truncate" title="Contact Name">Contact Name</div></th>
                <th scope="col"><div class="slds-truncate" title="Account Name">Account Name</div></th>                    
          </tr>
    </thead>
    <tbody>
        <aura:iteration items="{!v.contacts}" var="contact">
             <tr>
                <td><div class="slds-truncate" title="{!contact.Name}">{!contact.Name}</div></td>
                <td><div class="slds-truncate" title="{!contact.Account.name}">{!contact.Account.name}</div></td>                     
            </tr>
        </aura:iteration>
    </tbody>

</table>
</aura:component>

controller 

({
doInit: function(component, event, helper) {      
    // Fetch the Contact list from the Apex controller   
    helper.getContactList(component);
}
})

helper 

({
  getContactList: function(component) {
        var actions = component.get('c.getContacts');

        console.log('action '+ actions);
        actions.setCallback(this, function(response) {                
            component.set('v.contacts', response.getReturnValue());
        });
        $A.enqueueAction(actions);
  }
  })

Server controller 

public class ContactsController {

@AuraEnabled
public static List<Contact> getContacts(){
    List<Contact> cLsit = new List<Contact>();
        cLsit = [SELECT Name, Account.Name FROM Contact];
    system.debug('cLsit ' + cLsit);
    return cLsit;
} }

In server side controller debug itself i checked the result contains Account Id instead of Account Name. Do any one have any idea what might be the issue.

Best Answer

If you print the JSON list returned from getContacts() method, Account name property is in camel case (i.e.: Name) whereas you're accessing it by all small characters (i.e. name).

Here is how your JSON looks like:

[
    {
        "Name": "Rose Gonzalez",
        "AccountId": "0016F00001rXwDdQAK",
        "Id": "0036F000022w3riQAA",
        "Account": {
            "Name": "Edge Communications",
            "Id": "0016F00001rXwDdQAK"
        }
    }
]

To resolve the issue replace:

{!contact.Account.name}

with:

{!contact.Account.Name}

Note: In lightning, as JavaScript is case sensitive and with returning data via SObject from server side, you'd not be sure on what casing would be returned; hence its a good practice to return data with wrapper classes.

Related Topic