1

Awesome people , I am bit new to LWC coding . Please do let me know ,What i am doing wrong here. I need to display the count of Child Contacts in Html template in lwc. I am not able to display size in the last line of my template code in {childSize} property. Its displaying as [object Object].Below is my code.

Apex :-
public with sharing class ParentToChildClass {
    @AuraEnabled(cacheable=true)
    public static List<Account> ShowAcctLst(){
         return [select id,name,(select id,lastname from Contacts) from Account limit 5];
    }
    @AuraEnabled(cacheable=true)
    public static Integer CountChild(){
        List<Contact> contactlst= new List<Contact>();
        List<Account> acclst= [select id,name,(select id,lastname from Contacts) from Account limit 5];
               for(Account a:acclst){
                contactlst.add(a.Contacts);
               }
               return contactlst.size();
    }
    
}
JS Controller :-
import { LightningElement, wire, track } from 'lwc';
import ShowAcctLst from '@salesforce/apex/ParentToChildClass.ShowAcctLst'; 
import CountChild from '@salesforce/apex/ParentToChildClass.CountChild'; 

export default class LWCCmp extends LightningElement {
    @track childsizeCount;
    @wire(ShowAcctLst)accounts;
    @wire(CountChild)childSize;
}
HTML Template :-
<template>
    <template for:each={accounts.data} for:item="acc">
        <lightning-layout horizontal-align="center" key={acc.Id}>
            <lightning-layout-Item>
                {acc.Name} &nbsp;&nbsp;
            </lightning-layout-Item><br/>
           <template for:each={acc.Contacts} for:item="con">
                <lightning-layout-Item key={con.Id}>
                    {con.LastName}
                </lightning-layout-Item>
            </template>
        </lightning-layout>                  
    </template><br/>
    {childSize}

</template>
  • Can you pls try {childSize.data} at HTML – Santanu Boral Jul 18 at 16:25
  • Not sure, but you can stringify the childSize variable to see the data structure. Also you don't necessarily need a new query to get the size you can use the first method and retrieve the length of contacts once you have the data from showAccLst in the JS – d_k Jul 18 at 16:30
  • @SantanuBoral....no its not working. – SFDC LWC Jul 18 at 16:31
  • @d_k..its giving me an error childSize is not defined on using JSON.stringify(childSize) inside js – SFDC LWC Jul 18 at 16:34
  • @d_k....your second suggestion worked. i am getting the result using first method only {a.Contacts.length}.I feel very grateful. Was stuck in this for past few hours. BTW,by any chance if you can help me as to why second method is not working,it would help me to gain more knowledge. – SFDC LWC Jul 18 at 16:39
1

Not sure why it's not working but you can try to:

Set the response from the wire call into a new variable and use that Variable to display the size. Something like

@wire(getCount)
    wiredContacts({ error, data }) {
        if (data) {
            this.count = data;
         }
   }

Also you don't necessarily need a new query to get the size you can use the first method and retrieve the length of contacts once you have the data from showAccLst in the JS

Here's a reference to wire: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.apex

PS. Please check the formatting of my code snippet, I'm writing this on my phone.

| improve this answer | |
  • this is giving me response provided I change my class code a bit. Inside CountChild() ,its not taking parent to child soql queries. But when i am using 2 seperate queries for parent and child ,its working fine and the result is showing correctly as per the code sugestion by you. – SFDC LWC Jul 20 at 15:25
  • Have modified your response. That's the correct answer. – SFDC LWC Jul 20 at 15:31

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.