LWC Data table not rendering all data [duplicate]

Question

I have created an Apex class with an SOQL query to get OpportunityLineItems. Testing the SOQL in query editor returns the expected response. All of the fields render in the LWC data table except for Product2.Name.

@AuraEnabled(Cacheable = true)
public static List<OpportunityLineItem> getOpportunityLineItem(){
    return [SELECT Id, Product2Id, Product2.Name, Quantity, UnitPrice, ProductCode FROM OpportunityLineItem];
}

Columns from LWC

    const columns = [
    {
        label: 'Product Name',
        fieldName: 'product2.Name',
        type: 'text',
        cellAttributes: { alignment: 'left' }


    }, {
        label: 'Quantity',
        fieldName: 'Quantity',
        type: 'number',
        editable: true,
        cellAttributes: { alignment: 'left' }

    }, {
        label: 'Sales Price',
        fieldName: 'UnitPrice',
        type: 'currency',
        editable: true,
        cellAttributes: { alignment: 'left' }
    }, {
        label: 'Product Code',
        fieldName: 'ProductCode',
        type: 'text',
        cellAttributes: { alignment: 'left' }

    }

];

Answer 1

What you can do is to transform the resulting list of OpportunityLineItem into another array of objects using the map function like below.

@track error;
@track records;

@wire(getOpportunityLineItem)
    wiregetOpportunityInfo(result) {
        const { data, error } = result;
        if(data) {
            this.records= data.map(row => { 
                return {...row, productName: row.product2.Name } 
            })
            this.error = null;
        }
        if(error) {
            this.error = error;
            this.records= [];
        }
   }

@track columns = [
        {
            label: 'Product Name',
            fieldName: 'productName',
            type: 'text',
            cellAttributes: { alignment: 'left' }


        }, 
        {
            label: 'Quantity',
            fieldName: 'Quantity',
            type: 'number',
            editable: true,
            cellAttributes: { alignment: 'left' }

        }, 
        {
            label: 'Sales Price',
            fieldName: 'UnitPrice',
            type: 'currency',
            editable: true,
            cellAttributes: { alignment: 'left' }
        }, 
        {
            label: 'Product Code',
            fieldName: 'ProductCode',
            type: 'text',
            cellAttributes: { alignment: 'left' }

        }

    ];

the html file

<template>
    <template if:true={records}>
        <lightning-datatable key-field="id" data={records} columns={columns} onrowaction={rowAction}
            hide-checkbox-column="true" resize-column-disabled="true">
        </lightning-datatable>
    </template>
</template>

Answer 2

You cannot access the fields of related objects by traversing with . on the JS side. You can just use Opportunity Product's / Line Item's name, by just using Name instead.

{
    label: 'Product Name',
    fieldName: 'Name',
    type: 'text',
    cellAttributes: { alignment: 'left' }
}