One of the column values not getting displayed in data table

Question

Need help in trouble shooting the Data table related issue:

Issue statement:

I have used two custom objects with lookup relationships in apex code which is used in .js file. The field information coming from parent custom object is not fetching data into data table. I have tested the query used in apex class and it is fetching field information from parent custom object.

Ask - Request help is understanding why the Course_Name__r.Course_SIS_Section_SIS_Course_Name__c is not getting displayed in the data table.

Here is my Apex class:

public with sharing class CourseAssigned {
    @AuraEnabled(cacheable=true)
    public static List<Courses_Taken__c> getAssignedCourse() {
        return [SELECT Id,
        Course_Name__r.Course_SIS_Section_SIS_Course_Name__c, Assigned_Date__c,
        Expected_Completion_Date__c,
     Course_Completion_Date__c
     FROM Courses_Taken__c];
    }
}

.js file

import { LightningElement, wire, track } from 'lwc';
import getAssignedCourse from '@salesforce/apex/CourseAssigned.getAssignedCourse';
import { updateRecord } from 'lightning/uiRecordApi';
import { refreshApex } from '@salesforce/apex';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import Assigned_Date from '@salesforce/schema/Courses_Taken__c.Assigned_Date__c';
import Expected_Completion_Date  from '@salesforce/schema/Courses_Taken__c.Expected_Completion_Date__c';
import Actual_Completion_Date from '@salesforce/schema/Courses_Taken__c.Course_Completion_Date__c';
import ID_FIELD from '@salesforce/schema/Courses_Taken__c.Id';


const COLS = [
    { label: 'Course Name', fieldName: 'Course_Name__r.Course_SIS_Section_SIS_Course_Name__c'},
    { label: 'Assigned Date', fieldName: 'Assigned_Date__c', editable: true },
    { label: 'Expected Completion Date', fieldName: 'Expected_Completion_Date__c', editable: true },
    { label: 'Actual Completion Date', fieldName: 'Course_Completion_Date__c', editable: true }
];

export default class CAWireLLC extends LightningElement {

    @track error;
    @track columns = COLS;
    @track draftValues = [];


    @wire(getAssignedCourse)
    AssignedCourses;

    handleSave(event) {

        const fields = {};
        fields[ID_FIELD.fieldApiName] = event.detail.draftValues[0].Id;
        fields[Assigned_Date.fieldApiName] = event.detail.draftValues[0].Assigned_Date__c;
        fields[Expected_Completion_Date.fieldApiName] = event.detail.draftValues[0].Expected_Completion_Date__c;
        fields[Actual_Completion_Date.fieldApiName] = event.detail.draftValues[0].Course_Completion_Date__c;

        const recordInput = {fields};

        updateRecord(recordInput)
        .then(() => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success',
                    message: 'Courese Assignment Dates updated',
                    variant: 'success'
                })
            );
            // Clear all draft values
            this.draftValues = [];

            // Display fresh data in the datatable
            return refreshApex(this.contact);
        }).catch(error => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error creating record',
                    message: error.body.message,
                    variant: 'error'
                })
            );
        });
    }
}

HTML File:

<template>
    <lightning-card title="Course Assigned" icon-name="custom:custom63">
        <div class="slds-m-around_medium">
                <lightning-datatable
                    key-field="Id"
                    data={AssignedCourses.data}
                    columns={columns}
                    onsave={handleSave}
                    draft-values={draftValues}>
                </lightning-datatable>
        </div>
    </lightning-card>
</template>

Answer 1

Relationships are not supported in data tables. You must flatten the object first.

{ label: 'Course Name', fieldName: 'Course_Name__r__Course_SIS_Section_SIS_Course_Name__c'},

...

@track AssignedCourses;

@wire(getAssignedCourse)
AssignedCoursesWire({data,error}) {
  if(data) {
    this.AssignedCourses = { data: data.map(record=>({...record, Course_Name__r__Course_SIS_Section_SIS_Course_Name__c: record.Course_Name__r.Course_SIS_Section_SIS_Course_Name__c
})) };
  }
}

This is only an example implementation, feel free to adjust as you desire.