LWC Salesforce Get Parent in Datatable Column

Question

I know that this question is out there however I am still a bit stuck. I am trying to make this as simple as possible. I am trying to make the Parent Value show in my Lightning datatable.

Show parent field in LWC

I was looking at the above question and answer however I am getting a very generic parsing error at line 28. I am not sure why. Any help would be appreciated. Have been looking at this for a few hours.

I have seen also where JavaScript Helpers were used for this but I am not sure how to make an independent Javascript File Successfully and call it from a Bundle

HTML:

<template>
    <lightning-card title="Price Books" icon-name="custom:custom14">
<div class="boarder"> 

    <template if:true={data}>

            <lightning-datatable
            key-field="Id"
            data={data}
            columns={columns}
            onsave={handleSave}
            draft-values={draftValues}>
        </lightning-datatable>


    </template>

</div>
</lightning-card>
</template>

Javascript

import { LightningElement,api,wire, track } from 'lwc';
import getPriceBookEntry from '@salesforce/apex/clsPriceBook.getPriceBookEntry';

const columns  = [
{ label:  'PRODUCT NAME', fieldName: 'productName', type: 'text' , cellAttributes: { alignment: 'left' }},
{ label: 'List Price', fieldName: 'UnitPrice', type: 'currency' },
{ label: 'Use Standard Price', fieldName: 'UseStandardPrice', type: 'boolean' 
},
{ label: 'Active', fieldName: 'IsActive', type: 'boolean' }
];

export default class LWC_PriceBooks extends LightningElement {
@track data;
@track columns = columns;
@track draftValues = [];
// @track PriceBooks;
//Passes a Record Id from the page to the Class. 
@api recordId;
error;

 @wire(getPriceBookEntry, {idProduct:'$recordId' })
 myPriceBooks(result) {
 if (result.data) {
     this.data = result.data.map(row=>{
         return{...row, productName: row.Product2.Name}
     })
     this.error = undefined;

 } else if (result.error) {
     this.error = result.error;
     this.data = undefined;
 }

}
}

Apex Class

public with sharing class clsPriceBook {
 @AuraEnabled(cacheable=true)

public static List<PriceBookEntry> getPriceBookEntry(String idProduct) {
    return [Select Pricebook2.Name, Pricebook2id,  ProductCode, UnitPrice, UseStandardPrice, isActive from PriceBookEntry where Product2Id = :idProduct and isActive = True];
}

}

Answer 1

You wont be able to display fields in the datatable from related objects by traversing with . What you can do is transform the resulting list of getPriceBookEntry into another array of objects using the map function like below.

@track data;
@track columns = columns;
@api recordId;
error;

const columns = [
    {
        label: 'PRODUCT NAME',
        fieldName: 'productName',
        type: 'text',
        cellAttributes: { alignment: 'left' }

    }
];

@wire(getPriceBookEntry, {idProduct:'$recordId' })
 myPriceBooks(result) {
     if (result.data) {
         this.data = result.data.map(row=>{
             return{...row, productName: row.Product2.Name}
         })
         this.error = undefined;

     } else if (result.error) {
         this.error = result.error;
         this.data = undefined;
     }

 }

    <template>
            <lightning-card title="Products" icon-name="standard:product" > <br/>
               <div style="width: auto;">
                   <template if:true={data}>
                           <div class="slds-grid slds-gutters">
                                <lightning-datatable data={data}
                                            columns={columns}
                                            key-field="id"
                                            hide-checkbox-column="true"
                                            onrowaction={handleRowActions}
                                            onsave={handleSave}
                                </lightning-datatable>
                           </div>
                   </template>
               </div>
           </lightning-card>   
    </template>

Answer 2

myPriceBooks is a function, not a variable. You should assign the data value to a variable:

@track priceBooks;

...

myPriceBooks({data,error}) {
  if(data) {
    this.priceBooks = data;
  }
  if(error) {
    // deal with the error
  }
}

...

    <lightning-datatable
        key-field="Id"
        data={priceBooks}
        columns={columns}
        onsave={handleSave}
        draft-values={draftValues}>
    </lightning-datatable>

Answer 3

You can use map and spread syntax with multiple fields

const result = await getOpportunities({accountId : accountId});
            this.oppData = result.map(row => {
                return {...row, accountName : row.Account.Name, buyerName : row.Buyer__r.Name}
            })