What is the best way to replace the if true condition in LWC

Question

I know that we can't write a specific condition in <template if:true={specificcondition}> LWC HTML file.

However what is the best way to implement next HTML code :

<template for:each={accounts} for:item="account">
    <template if:true="{account.Payment_Status__c = "Completed" }">
        <!-- some HTML code -->
    </template>
    <template if:true="{account.Payment_Status__c = "Not Received" }">
        <!-- some HTML code -->
    </template>
    <template if:true="{account.Payment_Status__c = "Blank" }">
        <!-- some HTML code -->
    </template>

</template>

JS file :

@wire(getAccountList)
setAccountList({ data, error }) {
    if (data) {
        this.accounts = data;
    } else if (error) {
        console.error(error);
    }
}

I know that the above code will not work.

But what is the best way to get the working approach for this ?

Answer 1

You can go through the accounts list in your JS file and create specific variables for each condition.

So the JS code would look like this :

@wire(getAccountList)
setAccountList({ data, error }) {
    if (data) { 
        let temporaryList = data;
        temporaryList.forEach( (account) => {
            account.completedPaymentStatus   = account.Payment_Status__c === "Completed";
            account.notReceivedPaymentStatus = account.Payment_Status__c === "Not Received";
            account.blankPaymentStatus       = account.Payment_Status__c === "Blank";
        })
        this.accounts = temporaryList;
    } else if (error) {
        console.error(error);
    }
}

And the HTML code would look like this :

<template for:each={accounts} for:item="account">
    <template if:true={account.completedPaymentStatus}>
        <!-- some HTML code -->
    </template>
    <template if:true={account.notReceivedPaymentStatus}>
        <!-- some HTML code -->
    </template>
    <template if:true={account.blankPaymentStatus}>
        <!-- some HTML code -->
    </template>
</template>

Answer 2

I would go with LWC Templates - without additional loops and ifs. Quite easy to extend about new payment status.

// as it is now.
@wire(getAccountList)
setAccountList({ data, error }) {
    if (data) {
        this.accounts = data;
    } else if (error) {
        console.error(error);
    }
}

<template for:each={accounts} for:item="account">
    <c-account-payment-status account={account}></c-account-payment-status>
</template>

//accountPaymentStatus.js
import { LightningElement, api } from 'lwc';

import completed from './templates/completed.html';
import notReceived from './templates/notReceived.html';
import blank from './templates/blank.html';

const STATUS_TO_TEMPLATE = {
    'Completed': completed,
    'Not Received': notReceived,
    'Blank': blank
};

export default class SpaPages extends LightningElement {
    @api account;

    render() {
        return STATUS_TO_TEMPLATE[this.account?.Payment_Status__c] || STATUS_TO_TEMPLATE['Blank'];
    }
}

//accountPaymentStatus/template/completed.html
<template>
      <!-- Completed HTML code -->
</template>

//accountPaymentStatus/template/notReceived.html
<template>
      <!-- Not Received HTML code -->
</template>

//accountPaymentStatus/template/blank.html
<template>
      <!-- Blank HTML code -->
</template>

References:

• https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_render