5

Suppose I am having something like:

<div>{order.name}</div>

In my lwc code, and I am reading the data from apex controller using something like:

import getOrderLines from '@salesforce/apex/Controller_OrderLinesUI.getOrderLines';

Not a wired method.

I will be getting order is undefined error. That's because order is null before the data is loaded from the apex controller.

The previous walkaround we are using is to put the div code inside a if:true template like:

<template if:true={order}>

This approach is working but a bit awkward to me. Is this the suggested way of doing this or is there a more elegant way?

8

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.

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.