Error handling if no data from parent to child LWC

Question

I am new to salesforce and javascript. I am passing an object from parent LWC to child LWC. but some fields in the object are empty or null. Since I am directly accessing them in the child component html, it is throwing errors. what is the best way to do error handling here? should copy the object into another object and check if each field has data and assign it to @api variables? or is there better way?

here is my code: Apex class

@AuraEnabled(cacheable = true)
public static pba__Request__c getTransactionDetails(String recordId){
    Trans transDetails = [SELECT Id, Name, loanNum, lenderName
    FROM Trans WHERE pba__Contact__c =: recordId limit 1];
    return transDetails ;
}

parent js file

@wire(getTransactionDetails, {
        recordId: '$recordId'
        }) 
        trans({error,data}){
            if(data){
            console.log(data);
            this.bTrans = data;
            console.log('btrans', this.bTrans);
            }
            if(error){
                console.log(error)};
        };

parent html

<c-mortgage-runway-panel buy-transaction={bTrans}> </c-mortgage-runway-panel>

child js file

export default class MortgageRunwayPanel extends LightningElement {
    @api recordId;
    @api buyTransaction;

child html

<lightning-input label="Loan Number" class="validate" required={isRequired} value={buyTransaction.LoanNumber_rh__c} onchange={handleLoanNumChange} pattern="[0-9]{10}$" message-when-pattern-mismatch="Please Enter valid 10 digit loan number" read-only={readOnly}> </lightning-input> 

when i am recieving data from Parent, the object its self is not null but the loan number is null. How should i handle this? Because I have more than 20 fields that can be empty.

Answer 1

The best way to handle errors in this situation is to use a conditional statement in your child component's JavaScript code to check if a field is null or empty before accessing it. This way, you can avoid errors being thrown when trying to access the fields.

Here's an example of how you could do this in your child component's JavaScript code:

import { LightningElement, api } from 'lwc';

export default class ChildComponent extends LightningElement {
    @api objectData;

    get field1() {
        return this.objectData && this.objectData.field1 ? this.objectData.field1 : 'No Data';
    }

    get field2() {
        return this.objectData && this.objectData.field2 ? this.objectData.field2 : 'No Data';
    }
}

In this example, we are using a conditional operator (&&) to check if the objectData property is defined and if the field1 and field2 properties of objectData are also defined. If field1 or field2 are not defined, the function returns the string "No Data".

In your child component's HTML file, you can then safely access the fields without worrying about errors being thrown:

<template>
    <p>Field 1: {field1}</p>
    <p>Field 2: {field2}</p>
</template>

By using this approach, you can avoid having to copy the entire object into another object just to check if each field has data, and you can also display a custom message in your component's UI if a field is null or empty.