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 {

    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, 
            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.';



        return oprList;

//Outer Class
public class OnboardingPeopleResult {

    public String accountid {get;set;} 
    public String firstname {get;set;} 
    public String lastname {get;set;} 
    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 {
    public string customname{get;set;}
    public string street1{get;set;}
    public string street2{get;set;}
    public string city{get;set;}
    public string state{get;set;}
    public string postalcode{get;set;}
    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


    wiredPeople({error, 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;
        this.record = row;
        this.bShowModal = true; // display modal window


    <!-- Lightning Data Table -->
    <lightning-card title="People"> 
        <lightning-datatable data={people} 

    <!-- Edit Record Modal Window --> 
    <template if:true={bShowModal}>
        <section role="dialog" tabindex="-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>
                 <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">{record.firstname} {record.lastname}</h2>
              <!-- 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 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 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 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 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 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>


              <!-- modal footer start-->
              <footer class="slds-modal__footer">
                   <lightning-button variant="brand"
        <div class="slds-backdrop slds-backdrop_open"></div>


Instead of using record.data use “record. OnboardingAddressResult.EmployerAddress.Street1”

I think that should work.

  • If I remove it then I get the following issue. How can I do this to resolve this issue along with the issue from my previous post? I need to be able to edit existing records yet create new ones as well using custom classes. salesforce.stackexchange.com/questions/285061/… – user891859 Nov 15 '19 at 19:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.