LWC – How to Handle Null Value in Lightning Web Components

I am fetching contact address in js and setting the address in a variable which I am using in html to print the address.

Now suppose if contact mailing state is empty then in html its printing 'null'.
How can I handle this situation?

JS::

import STATE_FIELD from "@salesforce/schema/Contact.MailingState";
import COUNTRY_FIELD from "@salesforce/schema/Contact.MailingCountry";
export default class CustomerContact extends LightningElement {
    MailingAddress;
    @wire(getRecord, {
        recordId: "$recordId",
        fields: [COUNTRY_FIELD, STATE_FIELD],
    })
    wiredData({ error, data }) {
        if (data) {
            const street = getFieldValue(this.contactRecord, STREET_FIELD);
            const country = getFieldValue(this.contactRecord, COUNTRY_FIELD);
            this.MailingAddress = street + "," + country;
        }
    }
}

HTML::

<div>{MailingAddress}<div> 
//this is printing null Country Name if street is blank.

Best Answer

let street = '' // assign a default value is a good practice, we use an empty string here

if(getFieldValue(this.contactRecord, STREET_FIELD)) { street = getFieldValue(this.contactRecord, STREET_FIELD) //if it is not null reassign }

Or you can do it in one line

let street = getFieldValue(this.contactRecord, STREET_FIELD) ?getFieldValue(this.contactRecord, STREET_FIELD) : ''

Related Solutions

Lightning Web Components – Handle Null Situation Before Data Loads from Controller

The approach you have right now is the correct and recommended way of doing this.

<template if:true={order}>

Because you are using an apex method imperatively here, the imported function whenever invoked returns a Promise. The order property that you have in your JS will only get populated once the Promise is completed. So if you attempt to refer any member properties even before the order itself has been populated, that will result in a null exception.

This approach and details around imperative apex methods is outlined in Call Apex Methods documentation. You can use any other Boolean property instead of using order which say is set to true only when the apex method is invoked. But that will just substitute the order with any other variable, the overall logic still remains the same.

Lightning Web Components – Wiring Apex to Property with @api Param Value

Define a setter-getter for tripId and use it to extract the @wire configuration value.

Here's what that looks like:

tripId; // value to use with @wire

_trip; // private var used with getter-setter
@api 
set trip(value) {
    this._trip = value;
    this.tripId = value.Id; // extract the value 
}
get trip() { return this._trip; }

@wire(getTickets, { recordId: '$tripId' }) tickets;

This approach with a getter-setter is preferred over other solutions (eg a getter only on tripId) because it'll keep this.tripId up to date whenever this.trip is changed.

Best Answer

Related Solutions

Lightning Web Components – Handle Null Situation Before Data Loads from Controller

Lightning Web Components – Wiring Apex to Property with @api Param Value

Related Topic