1

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

}

2 Answers 2

5

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>
7
  • 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, 2020 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/…
    – Jordan
    Jan 31, 2020 at 16:51
  • Yes. I changed it to:{ label: 'PRODUCT NAME', fieldName: 'productName', type: 'text' , cellAttributes: { alignment: 'left' }},
    – CodeMonger
    Jan 31, 2020 at 17:03
  • I reposted code, due to answers. Both Ironically throw errors.
    – CodeMonger
    Jan 31, 2020 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.
    – Jordan
    Jan 31, 2020 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>
4
  • 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, 2020 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, 2020 at 16:28
  • I had added that within my HTML however i still get the same error - <template if:true={PriceBooks}>
    – CodeMonger
    Jan 31, 2020 at 16:50
  • When the screen loads the other data appears but the Product Name column is empty
    – CodeMonger
    Jan 31, 2020 at 16:51

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .