Hi everyone, I'm trying to display account fields in lightning component after selecting a account from accounts dropdownlist. I'm getting the error like
"'lightning:outputField' [Cannot read property 'fieldApiName' of null]".
Could anyone help me to resolve this issue
Component
<aura:component controller="AccountDetailsComponent"
implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"
access="global">
<!-- handler -->
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<!-- attributes -->
<aura:attribute name="accounts" type="List"/>
<aura:attribute name="contactWrraperObj" type="Object"/>
<!-- Account Dropdown section1 -->
<div class="slds-size_4-of-12">
<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="Accounts">Accounts</div>
</th>
</tr>
</thead>
<tbody>
<lightning:select label="Accounts" aura:id="accountName">
<option value="" text="- None -"/>
<aura:iteration items="{!v.accounts}" var="acc">
<option value="{!acc.Name}" text="{!acc.Name}"/>
</aura:iteration>
</lightning:select>
</tbody>
</table>
<br/>
<lightning:button label="Submit" class="slds-button_brand" onclick="{!c.contactsList }"/>
<br/>
<br/>
</div>
<br/>
<br/>
<!-- Details section2 -->
<div class="slds-page-header">
Account Details
<div>
<lightning:outputField fieldName="{!v.contactWrraperObj.accountObj.Name}"/>
<lightning:outputField fieldName="{!v.contactWrraperObj.accountObj.Industry}"/>
<lightning:outputField fieldName="{!v.contactWrraperObj.accountObj.Phone}"/>
</div>
</div>
<!-- Related list section3 -->
<div class="slds-page-header">
Related Contacts
<div>
<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="ID">ID</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Name">Name</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Email">Email</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Phone">Phone</div>
</th>
</tr>
</thead>
<tbody>
<!-- Use the Apex model and controller to fetch server side data -->
<aura:iteration items="{!v.contactWrraperObj.listContactObj}" var="contact">
<tr>
<th scope="row">
<div class="slds-truncate" title="{!contact.Id}">{!contact.Id}</div>
</th>
<td>
<div class="slds-truncate" title="{!contact.Name}">{!contact.Name}</div>
</td>
<td>
<div class="slds-truncate" title="{!contact.Email}">{!contact.Email}</div>
</td>
<td>
<div class="slds-truncate" title="{!contact.Phone}">{!contact.Phone}</div>
</td>
</tr>
</aura:iteration>
</tbody>
</table>
</div>
</div>
</aura:component>
Controller.js
({
doInit: function (component, event, helper) {
var action = component.get('c.getAccountsList');
action.setCallback(this, function (response) {
component.set('v.accounts', response.getReturnValue());
});
$A.enqueueAction(action);
},
contactsList: function (component, event, helper) {
var action = component.get('c.getContactDetail');
var selectedAccountName = component.find('accountName').get('v.value');
console.log(selectedAccountName);
action.setParams({
'accountName': selectedAccountName
});
action.setCallback(this, function (response) {
component.set('v.contactWrraperObj', response.getReturnValue());
console.log(contactWrraperObj);
});
$A.enqueueAction(action);
}
});
Apex class:
public class AccountDetailsComponent {
@AuraEnabled
public static List<Account> getAccountsList() {
List<Account> accts = [SELECT id, Name, Industry, Phone FROM Account LIMIT 10];
return accts;
}
@AuraEnabled
public static AccountWithContactWrapper getContactDetail(String accountName) {
List<Contact> cons;
Account accObj;
if (accountName != '') {
accObj = [SELECT Id, Industry, Phone, Name FROM Account WHERE Name = :accountName LIMIT 1];
cons = [SELECT id, Name, Email, Phone FROM Contact WHERE AccountId = :accObj.Id];
}
AccountWithContactWrapper wrapperObj = new AccountWithContactWrapper();
wrapperObj.accountObj = accObj;
wrapperObj.listContactObj = cons;
return wrapperObj;
}
public class AccountWithContactWrapper {
@AuraEnabled
public Account accountObj;
@AuraEnabled
public List<Contact> listContactObj;
}
}
Thanks
