+ Start a Discussion
mbudzynmbudzyn 

Lightning Component not rendering related fields

I'm new to Lightning components and am experimenting with my first app displaying a list of records from a custom object (Aircraft_Relationship__c); each record will include fields from two other related objects (master-detail to Aircraft__c and lookup to Account (field is  Account is Aircraft_User__c). The listing of the primary object (Aircraft_Relationship__c) works fine.

For the life of me I cannot figure out why when I launch the app the related fields do not appear; I've reviewed the documentation and from what I understand the dot notation is supposed to work in traversing these relationships (as I'm familiar with in VF).

Any help would be appreciated (am I missing something obvious?)

Hre's Apex controller pulling the related fields:
public with sharing class auraAClisting {

    @AuraEnabled
    public static List<Aircraft_Relationship__c> findAll() {
        return [SELECT id, name,status__c,ownership__c,Aircraft__r.name,aircraft__r.id,New_Used__c,Model__c,Aircraft_User__c,Aircraft_User__r.name,Owner__c,Owner__r.name FROM Aircraft_Relationship__c where status__c = 'Delivered' LIMIT 50];
    }
}
Here's the client-side controller:
({
    doInit : function(component, event) {
        var action = component.get("c.findAll");
        action.setCallback(this, function(a) {
            component.set("v.acr", a.getReturnValue());
        });
        $A.enqueueAction(action);
    }
})
And the component:
<aura:component controller="auraAClisting">
    <aura:attribute name="acr" type="Aircraft_Relationship__c[]"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <ul class="list-group">
        <aura:iteration items="{!v.acr}" var="ac">
            <li class="list-group-item">
                <a href="{! '/' + ac.Id }">
                    <p>{!ac.Name}</p>             <-- DISPLAYS VALUE in APP
                    <p>{!ac.Aircraft__c}</p>      <-- DISPLAYS VALUE in APP
                    <p>{!ac.Aircraft__r.id}</p>   <-- NOTHING APPEARS in APP
                </a>
            </li>
        </aura:iteration>
    </ul>
</aura:component>
Best Answer chosen by mbudzyn
mbudzynmbudzyn
Figured it out with help from support. Javascript is case sensitive!!!! (And I knew that and didn't put 2 and 2 together).

All Answers

mbudzynmbudzyn
In the SOQL? When I change __r to __c the Apex controller won't compile with the "Dont' understand Relationship" error.
return [SELECT id, name,status__c,ownership__c,Aircraft__c.name,aircraft__c.id,New_Used__c,Model__c,Aircraft_User__c,Aircraft_User__c.name,Owner__c,Owner__c.name FROM Aircraft_Relationship__c where status__c = 'Delivered' LIMIT 50];
I thought you had to use __r to traverse the relationship to get to the related object's record.
 
William TranWilliam Tran
Looking at this closely, I don't see anything strange.  Why don't you try it:

1) run the query in regular non-lightning mode to confirm the query work as expected.
2) Did you get the same result using {!ac.Aircraft__r.Name}?  Does it return blanks too?  In theory it should be the same as {!ac.Aircraft__c}

Thx
mbudzynmbudzyn
Thanks for the quick reply and suggestions.

Regarding your #2--yes, the behavior is the same for any of the related fields--nothing returns in the app:


Regarding your #1:
Query appears to be working fine; here's what I did in Execute Anonymous:
list<Aircraft_Relationship__c> acrs = new list<Aircraft_Relationship__c>([SELECT id, name,status__c,ownership__c,Aircraft__r.name,aircraft__r.id,New_Used__c,Model__c,Aircraft_User__c,Aircraft_User__r.name,Owner__c,Owner__r.name FROM Aircraft_Relationship__c where status__c = 'Delivered' LIMIT 50]);
system.debug('>>> Size: ' + acrs.size());
system.debug('>>> related field id/name: ' + acrs[0].Aircraft__r.id + '/' + acrs[0].Aircraft__r.name);
Here's the resulting debug lines (most of the debug log omitted for clarity)--and the related fields are being returned:
09:33:45.040 (40057329)|SOQL_EXECUTE_BEGIN|[1]|Aggregations:0|SELECT id, name, status__c, ownership__c, Aircraft__r.name, aircraft__r.id, New_Used__c, Model__c, Aircraft_User__c, Aircraft_User__r.name, Owner__c, Owner__r.name FROM Aircraft_Relationship__c WHERE status__c = 'Delivered' LIMIT 50
09:33:45.095 (95025677)|SOQL_EXECUTE_END|[1]|Rows:50
09:33:45.095 (95911072)|USER_DEBUG|[2]|DEBUG|>>> Size: 50
09:33:45.096 (96143593)|USER_DEBUG|[3]|DEBUG|>>> related field id/name: a06E0000000Ki3QIAS/TH-1741
What I didn't post yet is the running app; here's a screen cap of what it's returning:
User-added image

 
William TranWilliam Tran
Based on your screen print, doesn't it look like the ID is showing?

try removing everything and leaving the id and see what is displayed.

by does the link work(does it take you to the detail page)? <a href="{! '/' + ac.Id }">

thx
<li class="list-group-item">
                <a href="{! '/' + ac.Id }">
<b>                 
                    <p>{!ac.Aircraft__r.id}</p>   <-- NOTHING APPEARS in APP
</b>                </a>
            </li>

 
mbudzynmbudzyn
Yes, the id appears for the line:
<p>{!ac.Aircraft__c}</p>
But not for:
<p>{!ac.Aircraft__r.id}</p>

I would expect the id to appear twice, but it does not for the latter line.
(and yes, the link works).

I've been working on this for a few days and I've simplified the problem down; I really want a number of related fields to appear on the listing, not just the Id field. I'm using {!ac.Aircraft__r.id} to test if I can get at least one related field to show up on the listing.
William TranWilliam Tran
Also,

I see, you set the attribute before the handler/initialization in your component.

Typically the handler goes first then the attribute.

thx.

<aura:attribute name="acr" type="Aircraft_Relationship__c[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
 
mbudzynmbudzyn
So I updated the component as you suggested, moving the handler to the top and removing the other field references:
<aura:component controller="auraAClisting">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="acr" type="Aircraft_Relationship__c[]"/>
    <ul class="list-group">
        <aura:iteration items="{!v.acr}" var="ac">
            <li class="list-group-item">
                <a href="{! '/' + ac.Id }">
                 <b>   <p>{!ac.Aircraft__r.name}</p>
                    </b>    
                </a>
            </li>
        </aura:iteration>
    </ul>
</aura:component>
And I get a list--so it is iterating over the returned records, but no values appear:
User-added image
 
mbudzynmbudzyn
Figured it out with help from support. Javascript is case sensitive!!!! (And I knew that and didn't put 2 and 2 together).
This was selected as the best answer
Big EarsBig Ears
Hey there,

I'm having the same issue you were, but am unsure of the case I should be using to ensure this works. What was your solution in the end? I feel like I'm matching cases correctly, but clearly have something wrong?

Andy
arpit sethi 23arpit sethi 23
Note:- Lightning is case sensitive.  {! ac.Aircraft__r.name } is not same as {! ac.Aircraft__r.Name}.  I hope it helps :)
Pasan   EeriyagamaPasan Eeriyagama
Hi there,

I see clearly id should have been Id because JS case sensitivity.

I'm having same kind issue. Case is all good. when I check in Console.log __r field is properly populated. But same name in mark up doesn't show up the value. 

Any help on this please.
 
ChandrakanthChandrakanth
Hi All, Follow this link for an answer.
https://salesforce.stackexchange.com/questions/193501/displaying-related-records-in-lightning/193507#193507
Tyler McCartyTyler McCarty
Hello, so I will show you what I have, what didn't work and what did work. I was getting the same problem with no value being displayed in lightning component even though everything was correct.

I have the query: 

APEX
        List<Property_Contact_Roles__c> ret = [select name, property__r.name, property__r.market__c, 
                                               property__r.region__c from Property_Contact_Roles__c  limit 5]; 


AURA
  <aura:iteration items="{!v.retProperties}" var="prop" indexVar="index">
 </a></div>
            <tr>
(DOESN'T WORK)   Region: {!prop.property__r.region__c}
            </tr>
            <tr>
(WORKS)                Region:  {!prop.Property__r.Region__c}
            </tr>
</div>
</a>


I do not know why it has to be in this format, because the query is obviously not formatted like so, but the first letter has to be capitalized.
Hope this helps.