function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Katie KourtakisKatie Kourtakis 

LWC - Datatable Does not Dispaly Data

Hi, I'm trying to create an LWC that displays a datatable of records from a custom obect called Match__c. I want to display the record Id, the participant, and volunteer fields in the datatable where the field volunteer job on the Match record equals the record id of the page being viewed. I created an apex controller to pull the data. The table will not display any data even though I have permissions to the object/fields. On load the console displays "DevTools Failed to Load Source Map". Here are some pictures: 

Apex Controller
User-added imageJS
User-added imageHTML
User-added imageComponent
User-added image
Any help would be appreciated. This is my first LWC.
Best Answer chosen by Katie Kourtakis
Alain CabonAlain Cabon
You were close to goal.

1) @wire(getMatchList, { recId: '$recordId' })  => the position of the parameter is not sufficient, the name of the field must be the same in Apex.

2) It is more likely:  Volunteer__r.Name  (it is a lookup field) 
public with sharing class MatchController {
    @AuraEnabled(cacheable = true)
    public static List<Match__c> getMatchList(String recId){
    Return [SELECT Id, Participant_Name__c, Volunteer__r.Name
        FROM Match__c
        WHERE Volunteer_Job__c =: recId];
    }
}

3)  You just need to convert the result of the request (implicit fields data and error) into the fields associated with the columns ( Process record data )

You have used the short format but it is better to track the error too with an extended wiredRecord.

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/data_error
  
import {LightningElement,wire,track,api} from 'lwc';
import getMatchList from '@salesforce/apex/MatchController.getMatchList';

const columns = [
    { label: 'MatchId', fieldName: 'matchName'},
    { label: 'Participant', fieldName: 'participantName'},
    { label: 'Volunteer', fieldName: 'volunteerName'}
];

export default class Match extends LightningElement {
    columns = columns;

    @api recordId;

    @track error;

    match = [];

    @wire(getMatchList, {
        recId: '$recordId'
    })
    wiredRecord({ error, data }) {
        if (error) {  // documentation
            this.error = 'Unknown error';
            if (Array.isArray(error.body)) {
                this.error = error.body.map(e => e.message).join(', ');
            } else if (typeof error.body.message === 'string') {
                this.error = error.body.message;
            }
            this.match = undefined;
        } else if (data) {
            // Process record data
            console.log('data:' + JSON.stringify(data));
            let d = [];
            data.forEach(element => {
                let elt = {};
                elt.matchName = element.Id;
                elt.participantName = element.Participant_Name__c ;
                elt.volunteerName =  element.Volunteer__r.Name ;
                d.push(elt);
            });
            this.match = d;
        }
    }
}

4) data={match} is sufficient. 
<template>
    <lightning-card title="Matches" icon-name="custom:custom15">{recordId}
        <template if:true={error}>
            <p>{error}</p>
        </template>
        <div style="height: 300px;">
            <lightning-datatable record-id={recordId} key-field="Id" data={match} columns={columns}>
            </lightning-datatable>
        </div>
    </lightning-card>
</template>

 

All Answers

ANUTEJANUTEJ (Salesforce Developers) 
Hi Katie,

Can you try checking if you are receiving the records in the apex class? in case if you are receiving the records then the error might be with the component. wherein you try checking if you are receiving the records from the apex class.

Do let me know if this helps.

Regards,
Anutej
Alain CabonAlain Cabon
Hi Katie,

You should post your text code by using the button: "< >"  [ Add a code sample ] 

There are some errors and it is faster to fix them quickly by copy/paste a text (impossible with an image)

Volonteer__c  is a lookup field (reference) probably?

Your LWC component is inside a record detail page? 
 
Alain CabonAlain Cabon
Volunteer__c   (typo)
Katie KourtakisKatie Kourtakis
Hi Alain,

Sorry about the images. The Volunteer_Job__c on the Match object is not a lookup field. It is a formula field that holds the Volunteer Job Id that comes from a different object connected to the Match object. The LWC component is located on the Volunteer Job record detail page. Hope that helps. I also tried taking away the WHERE clause in my SOQL statement and running the code but it still didn't produce any results.
Katie KourtakisKatie Kourtakis
the volunteer__c field is a lookup
Alain CabonAlain Cabon
Ok, as long as you can't copy/paste your code, that will not be possible to help you more for me.

User-added image

It is just the button in yellow above.
Katie KourtakisKatie Kourtakis
Hi, I've modified the code from yesterday. Here is the latest. It still doesn't display the data however.
HTML 
<template>
    <lightning-card  title="Matches" icon-name="custom:custom15">
       <div style="height: 300px;">
    <lightning-datatable record-id={recordId}
            key-field="Id"
            data={match.data}
            columns={columns}>
    </lightning-datatable>
</div>    
    </lightning-card>
</template>

JS
​​​​​​ 
import { LightningElement, wire, api} from 'lwc';
import getMatchList from '@salesforce/apex/MatchController.getMatchList';

 const columns = [
     { label: 'MatchId', fieldName: 'matchName'},
     { label: 'Participant', fieldName: 'participantName'},
     { label: 'Volunteer', fieldName: 'volunteerName'}
 ];

export default class Match extends LightningElement {
    columns = columns;
    
@api recordId;
@wire(getMatchList, {recID: '$recordId'})
    match;
}

Apex Class 
public with sharing class MatchController {
    @AuraEnabled(cacheable = true)
    public static List<Match__c> getMatchList(String recId){
    Return [SELECT Id, Participant_Name__c, Volunteer__c
        FROM Match__c
        WHERE Volunteer_Job__c =: recId];
    }
  
}

Thanks
 
Alain CabonAlain Cabon
You were close to goal.

1) @wire(getMatchList, { recId: '$recordId' })  => the position of the parameter is not sufficient, the name of the field must be the same in Apex.

2) It is more likely:  Volunteer__r.Name  (it is a lookup field) 
public with sharing class MatchController {
    @AuraEnabled(cacheable = true)
    public static List<Match__c> getMatchList(String recId){
    Return [SELECT Id, Participant_Name__c, Volunteer__r.Name
        FROM Match__c
        WHERE Volunteer_Job__c =: recId];
    }
}

3)  You just need to convert the result of the request (implicit fields data and error) into the fields associated with the columns ( Process record data )

You have used the short format but it is better to track the error too with an extended wiredRecord.

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/data_error
  
import {LightningElement,wire,track,api} from 'lwc';
import getMatchList from '@salesforce/apex/MatchController.getMatchList';

const columns = [
    { label: 'MatchId', fieldName: 'matchName'},
    { label: 'Participant', fieldName: 'participantName'},
    { label: 'Volunteer', fieldName: 'volunteerName'}
];

export default class Match extends LightningElement {
    columns = columns;

    @api recordId;

    @track error;

    match = [];

    @wire(getMatchList, {
        recId: '$recordId'
    })
    wiredRecord({ error, data }) {
        if (error) {  // documentation
            this.error = 'Unknown error';
            if (Array.isArray(error.body)) {
                this.error = error.body.map(e => e.message).join(', ');
            } else if (typeof error.body.message === 'string') {
                this.error = error.body.message;
            }
            this.match = undefined;
        } else if (data) {
            // Process record data
            console.log('data:' + JSON.stringify(data));
            let d = [];
            data.forEach(element => {
                let elt = {};
                elt.matchName = element.Id;
                elt.participantName = element.Participant_Name__c ;
                elt.volunteerName =  element.Volunteer__r.Name ;
                d.push(elt);
            });
            this.match = d;
        }
    }
}

4) data={match} is sufficient. 
<template>
    <lightning-card title="Matches" icon-name="custom:custom15">{recordId}
        <template if:true={error}>
            <p>{error}</p>
        </template>
        <div style="height: 300px;">
            <lightning-datatable record-id={recordId} key-field="Id" data={match} columns={columns}>
            </lightning-datatable>
        </div>
    </lightning-card>
</template>

 
This was selected as the best answer
Katie KourtakisKatie Kourtakis
It's working!!! Thanks so much. I did have to modify the Volunteer_Job__c field to make it the 18-digit id instead of the 15-digit id but otherwise the code works perfectly.
Alain CabonAlain Cabon
Excellent, Katie. Bravo!

Your last posted code was already much better.

You made the effort to learn and you were able to apply your knowledge yet with just a ltttle help for the final step because the documentation is not sufficient for one part especially. The process of the record data is missing with an example in the documentation of Salesforce and the short form exists elsewhere so many people are confused at the beginning.