0

How to do empty check like we used to do in Aura bundle

<aura:if isTrue="{!not(empty(v.opportunityList))}">

I have a datatable in the lwc and want do display a message when no data to display Here my code: HTML:

<template>
<template if:true={parameters.data}>
<!--lightning datatable-->
    <lightning-datatable 
        key-field="id"
        data={parameters.data}
        onrowaction={handleRowAction}
        row-number-offset={rowOffset}
        hide-checkbox-column="true"
        columns={columns}></lightning-datatable>
</template>     
<template if:false={parameters.data}>
    No existing Contacts to display
</template>   
</template>

JS:

import { LightningElement, wire, track, api } from 'lwc';
//import method from the Apex Class
import fetchMatchingContact from '@salesforce/apex/DisplayContact.fetchMatchingContact';

// Declaring the columns in the datatable
const columns = [
                    {
                        label: 'Name',
                        fieldName: 'Name'
                    },
                    {
                        label: 'Phone',
                        fieldName: 'Phone'
                    },
                    {
                        label: 'Email',
                        fieldName: 'Email'
                    }
                ];
export default class DisplayExistingContact extends LightningElement {
    @api recordId;
    @track columns = columns;
    @track record = {};
    @track data = {};
    @track parameters;
    @wire(fetchMatchingContact, {leadId: '$recordId'}) 
    parameters;
}

2 Answers 2

1

What you are doing looks about right. However, since you are using "parameters.data" and want to track a change in parameters.data, you need to change the way you initialize the tracked value, like:

@track parameters = { data: undefined };

By using the inline object definition in the initializer for this tracked property you direct the LWC compiler to actually look for changes to the parameters.data value (not just the parameters itself), and such a change should happen when the fetchMatchingContact wire is itself invoked.

If your template were to use just the "data" tracked property, something sat unused in your example code, you could do this by changing the wire, thus:

@wire(fetchMatchingContact, { leadId: '$recordId' })
handleParameters({data, error}) {
    this.data = data;
}

Here, once the wire completes the this.data property is updated and, this being tracked, the relevant parts of the template will be re-processed to reflect the new data.

5
  • I tried the first approach but it's still not working Oct 10, 2019 at 10:47
  • What happens in this case?
    – Phil W
    Oct 10, 2019 at 12:40
  • It still shows the table header Oct 10, 2019 at 13:39
  • OK, well the if:true={parameters.data} and if:false={parameters.data} should work fine because this relies on the "truthiness" of the value. If the value is null or undefined if:true will false while if:false will succeeed. Because you have the parameters as the result of your wire, the whole parameters property gets set when the wire executes and your template should render.
    – Phil W
    Oct 10, 2019 at 13:47
  • That's why I said it looks more-or-less right. Can I ask you to try to make the template use just "data", and update the wire to use the "handleParameters" type approach I suggested and see if that works.
    – Phil W
    Oct 10, 2019 at 13:48
0

The way I handled this was using a Boolean variable that gets set to true in JavaScript if object is not empty.

if(Object.keys(parameters).length === 0 && parameters.constructor === Object){
    //if object is empty
    this.booleanVar= false;
}
else{
   this.booleanVar= true; 
}

Then using this Boolean variable on html:

<template if:true={booleanVar}>
</template>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .