Im running into the following javascript error when trying to display inner class data on my LWC. This was working fine until I added ".data" to my output variables for employerAddress to resolve another issue. All suggestions are appreciated. Thanks ahead of time.
Error: [Cannot read property 'employerAddress' of undefined]
public with sharing class Onboarding {
@AuraEnabled(cacheable=true)
public static List<OnboardingPeopleResult> getpeople(String recordId) {
List<String> rolelist = new List<String>();
List<OnboardingPeopleResult> oprList = new List<OnboardingPeopleResult>();
OnboardingPeopleResult oprobj = new OnboardingPeopleResult();
for(AccountContactRelation acr : [select Id, AccountId, Contact.Firstname,
Contact.Lastname
from AccountContactRelation
where AccountId =: recordId]){
oprobj = new OnboardingPeopleResult();
oprobj.accountid = acr.Contact.AccountId;
oprobj.firstname = acr.Contact.Firstname;
oprobj.lastname = acr.Contact.Lastname;
oprobj.entityname = acr.Contact.Entity_Name__c;
oprobj.employerAddress = new OnboardingAddressResult();
oprobj.employerAddress.street1 = '101 Test St.';
oprList.add(oprobj);
}
return oprList;
}
}
//Outer Class
public class OnboardingPeopleResult {
@AuraEnabled
public String accountid {get;set;}
@AuraEnabled
public String firstname {get;set;}
@AuraEnabled
public String lastname {get;set;}
@AuraEnabled
public OnboardingAddressResult employerAddress {get;set;}
public OnboardingPeopleResult() { //String accountid, String firstname, String lastnameAccount client, Account pa, AccountConctactRelationship acr
this.accountid = '';
this.firstname = '';
this.lastname = '';
this.middlename = '';
this.employerAddress = new OnboardingAddressResult();
}
}
//Inner Class
public class OnboardingAddressResult {
@AuraEnabled
public string customname{get;set;}
@AuraEnabled
public string street1{get;set;}
@AuraEnabled
public string street2{get;set;}
@AuraEnabled
public string city{get;set;}
@AuraEnabled
public string state{get;set;}
@AuraEnabled
public string postalcode{get;set;}
@AuraEnabled
public integer key {get;set;}
public OnboardingAddressResult() {
this.customname = '';
this.street1 = '';
this.street2 = '';
this.city = '';
this.state = '';
this.postalcode = '';
this.key = 0;
}
}
import { LightningElement, wire, track, api} from 'lwc';
import getpeople from '@salesforce/apex/Onboarding.getpeople';
export default class OnboardingPeople extends LightningElement {
@api recordId;
@api people = [];
@api record = {};
@track error;
@track bShowModal = false;
@track value;
@track columns = [
{
label: 'Action',
type: 'button-icon',
initialWidth: 75,
typeAttributes: {
iconName: 'action:edit',
title: 'Edit',
variant: 'border-filled',
alternativeText: 'Action'
}
},
{
label: 'First Name',
fieldName: 'nameUrl',
type: 'url',
typeAttributes: {label: { fieldName: 'firstname' },
target: '_blank'},
sortable: false
},
{
label: 'Last Name',
fieldName: 'lastname',
type: 'text',
sortable: false
},
{
label: 'Roles',
fieldName: 'roles',
type: 'text',
sortable: false
}
];
@wire(getpeople,{recordId:'$recordId'})
wiredPeople({error, data}){
if(data){
this.people = data;
this.error = undefined;
} else if (error) {
this.people = undefined;
this.error = error;
}
}
// Row Action event to show the details of the record
handleRowAction(event) {
const row = event.detail.row;
console.log('row-->'+JSON.stringify(row));
this.record = row;
this.bShowModal = true; // display modal window
}
}
<template>
<!-- Lightning Data Table -->
<lightning-card title="People">
<lightning-datatable data={people}
columns={columns}
key-field="accountid"
hide-checkbox-column="true"
onrowaction={handleRowAction}></lightning-datatable>
</lightning-card>
<!-- Edit Record Modal Window -->
<template if:true={bShowModal}>
<section role="dialog" tabindex="-1"
aria-labelledby="modal-heading-01"
aria-modal="true"
aria-describedby="modal-content-id-1"
class="slds-modal slds-fade-in-open slds-modal_large">
<div class="slds-modal__container">
<!-- modal header start -->
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
<lightning-icon icon-name="utility:close" alternative-text="close" variant="inverse" size="small" ></lightning-icon>
</button>
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">{record.firstname} {record.lastname}</h2>
</header>
<!-- modal body start -->
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<div class="c-container">
<h3 class="slds-section-title--divider">Personal Information</h3>
<lightning-layout multiple-rows="true">
<lightning-layout-item size="12" small-device-size="12" medium-device-size="4" large-device-size="4">
<div class="custom-pad"><lightning-input data-formfield="firstname" name="fname" type="text" label="First" value={record.firstname} onchange={handleSavePerson}></lightning-input></div>
</lightning-layout-item>
<lightning-layout-item size="12" small-device-size="12" medium-device-size="4" large-device-size="4">
<div class="custom-pad"><lightning-input type="text" label="Last" value={record.lastname}></lightning-input></div>
</lightning-layout-item>
</lightning-layout>
<lightning-layout multiple-rows="true">
<lightning-layout-item size="12" small-device-size="12" medium-device-size="3" large-device-size="3">
<div class="custom-pad"><lightning-input type="text" label="Street" value={record.data.employerAddress.street1}></lightning-input></div>
</lightning-layout-item>
<lightning-layout-item size="12" small-device-size="12" medium-device-size="3" large-device-size="3">
<div class="custom-pad"><lightning-input type="text" label="City" value={record.data.employerAddress.city}></lightning-input></div>
</lightning-layout-item>
<lightning-layout-item size="12" small-device-size="12" medium-device-size="3" large-device-size="3">
<div class="custom-pad"><lightning-input type="text" label="State" value={record.data.employerAddress.state}></lightning-input></div>
</lightning-layout-item>
<lightning-layout-item size="12" small-device-size="12" medium-device-size="3" large-device-size="3">
<div class="custom-pad"><lightning-input type="text" label="Postal Code" value={record.data.employerAddress.postalcode}></lightning-input></div>
</lightning-layout-item>
</lightning-layout>
</div>
</div>
<!-- modal footer start-->
<footer class="slds-modal__footer">
<lightning-button variant="brand"
label="Close"
title="Close"
onclick={closeModal}
></lightning-button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</template>
</template>
