+ Start a Discussion
Sumesh ChandranSumesh Chandran 

Get value of the parent and child object using wire service in lwc html

I am trying to display the value of a related custom object field along with the parent fields on my component html.
Here is the SOQL - The below works, I get the data of the child object with the values from the object
SELECT Name,sumchans__Province_Code__c,
    (select sumchans__Penetration__c, sumchans__Total_Units__c,sumchans__On_Billings__c, sumchans__Date_Of_Calculation__c 
    from sumchans__City_Stats__r) FROM sumchans__CITY_MASTER__c
Here is the wire service code:
import { LightningElement, wire } from 'lwc';
import getCityStats from '@salesforce/apex/mduMarketAnalysisController.getCityStats';  
export default class MduPenetration extends LightningElement {
    @wire(getCityStats)cityMaster;        
}

And here is the Component HTML. This just shows the parent fields values not anything from the child, but I don't get any errors.
 
<template if:true={cityMaster.data}>
            <template for:each={cityMaster.data} for:item="city">
                <lightning-layout horizontal-align="center" key={city.Id}>
                    <lightning-layout-Item>
                        {city.Name}
                    </lightning-layout-Item>
                    <lightning-layout-Item>
                        {city.sumchans__City_Stats__r.sumchans__Total_Units__c}
                    </lightning-layout-Item>
                </lightning-layout>                  
            </template>


 
Best Answer chosen by Sumesh Chandran
Maharajan CMaharajan C
Hi Sumesh,

Try the below changes in HTML and JS:


HTML:
 
<template for:each={cityMaster} for:item="city">
	<lightning-layout horizontal-align="center" key={city.Id}>
		<lightning-layout-Item>
			{city.Name}
		</lightning-layout-Item>
		<template for:each={city.sumchans__City_Stats__r} for:item="relatedcity">
			<lightning-layout-Item>
				{relatedcity.sumchans__Total_Units__c}
			</lightning-layout-Item>
		</template>
	</lightning-layout>                  
</template>

JS:
 
import { LightningElement, wire } from 'lwc';
import getCityStats from '@salesforce/apex/mduMarketAnalysisController.getCityStats';  
export default class MduPenetration extends LightningElement {

@track cityMaster;
@track error;
	
	@wire(getCityStats)
    wiredCityMaster({ error, data }) {
        if (data) {
            this.cityMaster = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.cityMaster = undefined;
        }
    }
}


Thanks,
Maharajan.C

All Answers

Maharajan CMaharajan C
Hi Sumesh,

Try the below changes in HTML and JS:


HTML:
 
<template for:each={cityMaster} for:item="city">
	<lightning-layout horizontal-align="center" key={city.Id}>
		<lightning-layout-Item>
			{city.Name}
		</lightning-layout-Item>
		<template for:each={city.sumchans__City_Stats__r} for:item="relatedcity">
			<lightning-layout-Item>
				{relatedcity.sumchans__Total_Units__c}
			</lightning-layout-Item>
		</template>
	</lightning-layout>                  
</template>

JS:
 
import { LightningElement, wire } from 'lwc';
import getCityStats from '@salesforce/apex/mduMarketAnalysisController.getCityStats';  
export default class MduPenetration extends LightningElement {

@track cityMaster;
@track error;
	
	@wire(getCityStats)
    wiredCityMaster({ error, data }) {
        if (data) {
            this.cityMaster = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.cityMaster = undefined;
        }
    }
}


Thanks,
Maharajan.C
This was selected as the best answer
Sumesh ChandranSumesh Chandran
Thanks Maharajan, that also worked.