data table unable to display the field of related object in LWC

Question

I have a data table which displays Name field and Address field(Address related to another object).The Name field is displayed properly but if I iterate over the list in html for pcon.Address__r.Name it gives error. If only pcon.Address__r is given, it shows [object object] in table. Can anybody resolve this issue. thank you in advance.

html

    <table class="slds-table slds-table--bordered">
        <thead>
            <tr>
                <th style="background-color: #151963;color: white;">Name</th>
                <th style="background-color: #151963;color: white;">Address</th>
            </tr>
        </thead>
        <tbody>
            <template for:each={pconfig} for:item="pcon" for:index="i">
                <tr class={pcon.row} data-id={pcon.Id} data-index={i} key={pcon.Id} onclick{getquotes} >
                    <td>{pcon.Name}</td>
                    <td>{pcon.Address__r.Name}</td>
                </tr>
            </template>
        </tbody>
    </table>
</lightning-layout-item>

Js:

@wire(Vendor_getProduct,{ basketId: 'fef0E0000dwedjh' })
    getProducts({error,data})
    {
         if(data)
         {
            //console.log( 'Fetched Data ' + JSON.stringify( data ) );
            this.pconfig =  JSON.parse( JSON.stringify( data) );
            console.log('products are:',data);
         }
         else if(error){
            this.error=data;
            console.log('error is undefined');
         } 
    }

apex class:

public class c {
    @AuraEnabled(cacheable=true)
    public static List<Product_Configuration__c> getProduct (Id basketId) {
        return [select  id, 
                        name, 
                        Address__r.name, 
                from  Product_Configuration__c
 where Product_Basket__c =:basketId];
    }

Answer 1

in js do not need to parse or stringify

use track decorator to define the variable like this @track pconfig = [];

this will resolve your problem

js :

@wire(Vendor_getProduct,{ basketId: '0032w000006LmH9AAK' })
    getProducts({error,data})
    {
         if(data){ 
            this.pconfig = data;
            console.log(this.pconfig)
        }
        if(error){
            console.error(error)
        }
    }