Lightning data table is not showing any data. I want to display parent and custom child objects data in datatable using search input in lwc

Question

Apex

public with sharing class LightningDataTable {

    @AuraEnabled(cacheable=true)
    public static list<providerEntity__c> getProviderList(string searchKey,string ProviderId) {
        string sTempSearchKey = '%' + searchKey + '%';

        // create contact list to store search result 
        list<providerEntity__c> lstContact = new list<providerEntity__c>();

        // query contact records
        for(providerEntity__c oCon : [Select Id, Name, Provider_Name_API__c, NPI__c, FedId__c, LicenceId__c, MedicareOscarNumber__c, (select Name, Site__c,  SLName__c,ProviderIdTxt__c,LOBName__c,PayToContractName__c from Service_Affiliation1__r )  From providerEntity__c WHERE (Provider_Name_API__c LIKE : sTempSearchKey OR NPI__c LIKE: sTempSearchKey  OR FedId__c LIKE: sTempSearchKey ) ]){
            lstContact.add(oCon);
        }

        //If there are no records found with searchKey then, throw aura exception with a message
        if(lstContact.size() == 0){
            throw new AuraHandledException('No Record Found..'); 
        }

        return lstContact;
    }

}

HTML

<template>
    <lightning-card title = "Search " icon-name = "custom:custom63">  
        <div class = "slds-m-around_medium">  
            <lightning-input type = "search" onchange = {handleKeyChange} class = "slds-m-bottom_small" label = "Search" >
            </lightning-input>  
            <template if:true = {providers}>

                <div style="height: 300px;">  
                    <lightning-datatable key-field="Id"
                                         data={providers}
                                         columns={columns}
                                         hide-checkbox-column="true"
                                         show-row-number-column="true"
                                         onrowaction={handleRowAction}>
                    </lightning-datatable>  
                </div>   
            </template>      
            <template if:true = {error}>  
                {error}>                  
            </template>  
        </div>  
    </lightning-card>
</template>

JS

import { LightningElement,track,api, wire } from 'lwc';
import getProviderList from '@salesforce/apex/LightningDataTable.getProviderList';
// import standard toast event 
import {ShowToastEvent} from 'lightning/platformShowToastEvent'; 
import { NavigationMixin } from 'lightning/navigation';
const columns = [
    {label: 'Name',fieldname: 'Provider_Name_API__c',type: 'Text;},
    {label: 'Id',fieldname: 'ServiceAffiliation1Name',type: 'Text'}, 
    {label: 'NPI',fieldname: 'NPI__c',type: 'Text'},
    {label: 'TIN',fieldname: 'FedId__c',type: 'Text'},
    {label: 'Site Id',fieldname: 'ServiceAffiliation1Site',type: 'Text'},
    {label: 'PPG',fieldname: 'ServiceAffiliation1SLName',type: 'Text'},
    {label: 'Address',fieldname: 'ServiceAffiliation1ProviderIdTxt',type: 'Text'},
    {label: 'LOB',fieldname: 'ServiceAffiliation1LOBName',type: 'Text'},
    {label: 'Contract Name',fieldname: 'ServiceAffiliation1PayToContractName',type: 'Text'},
    {label: 'License Id',fieldname: 'LicenceId__c',type: 'Text'},
    {label: 'Medicare Oscar Number',fieldname: 'MedicareOscarNumber__c',type: 'Text'}
];


export default class ProviderLightningTable extends  NavigationMixin(LightningElement) {
  
    @api recordId;
    @track providers; 
    @track error; 
    @track columns = columns; 
    searchKey = '';
    ProviderId;
 
    @wire(getProviderList, {
        searchKey: '$searchKey',
        ProviderId: 'recordId'
    })
    wiredclass(value){
        this.wiredActivities = value;
        const { data, error } = value;

        if (data) { 
            var ObjData = JSON.parse(JSON.stringify(data));

            ObjData.forEach(Record => {

                Record.ServiceAffiliation1Name =  Record.Service_Affiliation1__r.Name != undefined ? Record.Service_Affiliation1__r.Name : '';
                Record.ServiceAffiliation1Site =  Record.Service_Affiliation1__r.Site__c != undefined ? Record.Service_Affiliation1__r.Site__c : '';
                Record.ServiceAffiliation1SLName =  Record.Service_Affiliation1__r.SLName__c != undefined ? Record.Service_Affiliation1__r.SLName__c: '';
                Record.ServiceAffiliation1ProviderIdTxt =  Record.Service_Affiliation1__r.ProviderIdTxt__c != undefined ? Record.Service_Affiliation1__r.ProviderIdTxt__c: '';
                Record.ServiceAffiliation1LOBName =  Record.Service_Affiliation1__r.LOBName__c != undefined ? Record.Service_Affiliation1__r.LOBName__c: '';
                Record.ServiceAffiliation1PayToContractName =  Record.Service_Affiliation1__r.PayToContractName__c != undefined ? Record.Service_Affiliation1__r.PayToContractName__c: '';

            });

            this.providers = ObjData;
            this.error = undefined;
        } else if (error) {  
            this.error = error;  
            this.providers = undefined;
        }
    }

    handleKeyChange( event ) {
        this.searchKey = event.target.value;
    }
}

Answer 1

Record.Service_Affiliation1__r is a list, so in order to access to its elements you have to use brackets notation, i.e. Record.Service_Affiliation1__r[0].Name.
So if you only need the info of the first child, you can change your forEach to:

ObjData.forEach((record) => {
    if (record.Service_Affiliation__r && record.Service_Affiliation__r.length) {
        record.ServiceAffiliation1Name =  record.Service_Affiliation__r[0].Name;
        record.ServiceAffiliation1Site =  record.Service_Affiliation__r[0].Site__c;
        record.ServiceAffiliation1SLName =  record.Service_Affiliation__r[0].SLName__c;
        record.ServiceAffiliation1ProviderIdTxt =  record.Service_Affiliation__r[0].ProviderIdTxt__c;
        record.ServiceAffiliation1LOBName =  record.Service_Affiliation__r[0].LOBName__c;
        record.ServiceAffiliation1PayToContractName =  record.Service_Affiliation__r[0].PayToContractName__c;
    }
});

Keep in mind that A single providerEntity__c record may have multiple children, therefore Service_Affiliation1__r may have more than one element and if you have to show hierarchical data in a table, you might want to give a look at Tree Grid component.