How to fetch other fields (e.g. name) from Lookup Field on LWC from Array Object returned by Apex

Question

I am currently trying to display a Lookup Fields Name on LWC rather then the Id. This data is being returned from an APEX class which builds an Array of Objects Types, I am able to get the Id of the lookup field but not the Records Name, is there any way to do this?

I will need to pass the array back to the APEX to insert the records so I presume I would not want to modify the structure of the Objects in the Array?

JS:

import { LightningElement } from 'lwc';
import getPaymentsFromAccommodation from '@salesforce/apex/MakePaymentsController.getPaymentsFromAccommodation'
export default class Payments extends LightningElement {

    startDateInput
    endDateInput
    descriptionInput = ''

    newPayments = []
    handleFieldChange(event){
        const {name,value} = event.target
        this[name] = value
    }

     handleGetPayments(){
        getPaymentsFromAccommodation({StartDate:this.startDateInput,EndDate:this.endDateInput,Description:this.descriptionInput}).then(result=>{
            console.log(result)
            this.newPayments = result
            console.log(this.newPayments)
        }).catch(error=>{
            console.error(error)
        })
    } 
}

HTML:

<template>
    <lightning-card title="Make Payments">
        <div class="slds-p-around_medium">
            <div class="slds-grid">
                <div class="slds-col">
                    <span>        
                        <lightning-input type="date" date-style="short" name="startDateInput" label="Start date" onchange={handleFieldChange}></lightning-input>
                    </span>
                </div>
                <div class="slds-col">
                    <span>
                        <lightning-input type="date" date-style="short" name="endDateInput" label="End date" onchange={handleFieldChange}></lightning-input>
                    </span>
                </div>
                <div class="slds-col">
                    <span>
                        <lightning-button label="Get Clients" title="Get Clients" onclick={handleGetPayments}></lightning-button>
                    </span>
                </div>
            </div>
            <div class="slds-grid">
                <div class="slds-col">
                    <span>        
                        <lightning-input type="text" name="descriptionInput" label="Description"></lightning-input>
                    </span>
                </div>
                <div class="slds-col">
                    <span> 
                        <lightning-button label="Update Description" title="Update Description" onclick={handleUpdateDesc}></lightning-button>
                    </span>
                </div>
            </div>
        </div>
    </lightning-card>
    <lightning-card title="Make Payments">
        <table>
            <thead>
                <tr>
                    <th>Client</th>
                    <th>Accommodation</th>
                    <th>Payment Description</th>
                    <th>Amount</th>
                </tr>
            </thead>
            <tbody>
                <template if:true={newPayments}>
                    <template for:each={newPayments} for:item="np">
                        <tr key={np.id}>
                            <td>
                                {np.Client__r.Name}
                            </td>
                            <td>
                                {np.Clients_Accommodation__r.Name}
                            </td>
                            <td>
                                <lightning-input type="text" value={np.Description__c}></lightning-input>
                            </td>
                            <td>
                                <lightning-input type="number" value={np.Payment_Amount__c} formatter="currency" step="0.01"></lightning-input>
                            </td>
                        </tr>
                    </template>
                </template>
            </tbody>
        </table>
    </lightning-card>
</template>

APEX:

public with sharing class MakePaymentsController {

     @AuraEnabled
    public static List<Payment__c> getPaymentsFromAccommodation(Date StartDate, Date EndDate, String Description){
        try {
            System.debug(StartDate);
            System.debug(EndDate);
            List<Clients_Accommodation__c> clientsAccommodations = [SELECT Id,Name, Client__c, Client__r.Name, Date_moved_in__c, Date_moved_out__c FROM Clients_Accommodation__c 
                WHERE Date_moved_in__c<=:EndDate AND (Date_moved_out__c=null OR Date_moved_out__c>:StartDate) ORDER BY Client__r.Name];
            Id paymentRecordTypeId = [SELECT Id FROM RecordType
              WHERE DeveloperName = 'Payment' AND sObjectType = 'Payment__c'].Id;
                List<Payment__c> payments = new List<Payment__c>();
            Payment__c  payment = new Payment__c();
            for(Clients_Accommodation__c ca: clientsAccommodations){
                payment = new Payment__c();
                payment.Client__c = ca.Client__c;
                payment.Date__c = StartDate > ca.Date_moved_in__c ? StartDate : ca.Date_moved_in__c;
                payment.To_Date__c = ca.Date_moved_out__c == null ? EndDate : ca.Date_moved_out__c < EndDate ? ca.Date_moved_out__c:EndDate;
                payment.Clients_Accommodation__c = ca.Id;
                payment.Description__c = Description + ' ' + payment.Date__c  + ' to ' + payment.To_Date__c;
                payment.RecordTypeId = paymentRecordTypeId;
                payment.Payment_Type__c = 'Rent';

                payments.add(payment);
            }
            return payments;
        } catch (Exception e) {
            throw new AuraHandledException(e.getMessage());
        }
    } 
}

Answer 1

In your Html Template you are referring to two fields

• Client__r.Name
• Clients_Accommodation__r.Name

First

In your Apex controller, when you are looping on clientsAccommodations you need to add like below depending upon your field name for client name on Payment Object

payment.your_custom_field_Clients_Name= ca.Client__r.Name;

Second

In your Apex controller you are not retrieving the lookup field for Clients_Accommodation__r.Name, you want to add the Clients_Accommodation__r.Name field in the query of Clients_Accommodation__c

and then when you loop on clientsAccommodations in your apex controller you need to add like below

payment.your_custom_field_Clients_Accommodation = ca.Clients_Accommodation__r.Name;

then return payment Object.

then in your html you can access it like

{np.your_custom_field_Clients_Name}

{np.your_custom_field_Clients_Accommodation}