0

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];
}

}
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>
| improve this answer | |
  • Jermat if i use the above code i get this error: [LWC component's @wire target property or method threw an error during value provisioning. Original error: [Cannot read property 'Name' of undefined]] – CodeMonger Jan 31 at 16:41
  • I see in your original question for the first column you set the type to 'Name'. Have you changed it to 'text'? I Dont think name is a valid type. developer.salesforce.com/docs/component-library/bundle/… – Jemat Jan 31 at 16:51
  • Yes. I changed it to:{ label: 'PRODUCT NAME', fieldName: 'productName', type: 'text' , cellAttributes: { alignment: 'left' }}, – CodeMonger Jan 31 at 17:03
  • I reposted code, due to answers. Both Ironically throw errors. – CodeMonger Jan 31 at 17:19
  • Are you tracking data and passing that into the lightning data table correctly? Please see the updated answer which works for me with no errors. – Jemat Jan 31 at 17:20
1

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>
| improve this answer | |
  • I get this error now when loading the page:[LWC component's @wire target property or method threw an error during value provisioning. Original error: [Cannot read property 'Name' of undefined]] – CodeMonger Jan 31 at 16:12
  • @CodeMonger You need to not render the table until the data is available. Use if:true={priceBooks} to avoid rendering the table before the data is available, or you can always remember to set an empty list of values to avoid this error. – sfdcfox Jan 31 at 16:28
  • I had added that within my HTML however i still get the same error - <template if:true={PriceBooks}> – CodeMonger Jan 31 at 16:50
  • When the screen loads the other data appears but the Product Name column is empty – CodeMonger Jan 31 at 16:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.