+ Start a Discussion
Ertyq MrskErtyq Mrsk 

Some Field Values Not Displaying in table using LWC

I am trying to display records grouped by Module custom field in standard Contact object using Salesforce LWC. There are records displaying so far, but only Module and Name values are visible. Been trying to display also Email and Phone values, but unfortunately only the headers are visible.I have already tried searching for same scenarios and modified codes many times but still haven't had any progress with it,

Meanwhile, here's what I achieved:

contactLWC.html
<template>

    <table class="slds-table slds-table_cell-buffer slds-table_bordered ">
     <thead>
      <tr class="slds-line-height_reset">
       <th class="" scope="col">
        <div class="slds-truncate" title="contactModule">Module</div>
       </th>
       <th class="" scope="col">
        <div class="slds-truncate" title="contactName">Name</div>
       </th>
       <th class="" scope="col">
        <div class="slds-truncate" title="contactEmail">Email</div>
       </th>
       <th class="" scope="col">
        <div class="slds-truncate" title="contactPhone">Phone</div>
       </th>
      </tr>
     </thead>
     <tbody>
      <template if:true={mapData}>
       <template for:each={mapData} for:item="keyValue">
        <tr key={keyValue.key} class="slds-hint-parent">
            <th scope="col">
                <div>{keyValue.key}</div>
            </th>
            <template for:each={keyValue.value} for:item="value">
                <div key={value.Name}>
                    {value.Name}
                </div> 
                <div key={value.Email}>
                    {value.Email}
                </div> 
                <div key={value.Phone}>
                    {value.Phone}
                </div> 
            </template>
        </tr>      
       </template>
      </template>
     </tbody>
    </table>
</template>
contactLWC.js
 
import { LightningElement, track, wire } from 'lwc';

import getDataFromApex from '@salesforce/apex/ContactController.getData';

export default class contactLWC extends LightningElement {

    @track mapData = [];

    @wire(getDataFromApex) 
    wiredcontactdata({ data, error }) {
        if (data) {
            for(let key in data) {

                if (data.hasOwnProperty(key)) { 
                    this.mapData.push({key: key, value: data[key]});
                }
            }
        } else if (error) {
            window.console.log(error);
        }
    }

}
ContactController.cls
 
public class ContactController{

    @AuraEnabled(cacheable=true)

    public static Map<String, List<ContactWrapper>> getData()
    {

     Map<String, List<ContactWrapper>> mapModule = new Map<String, List<ContactWrapper>>();
     Map<String, Integer> moduleCountMap = new Map<String, Integer>();

     List<Contact> contactList = [SELECT Name, Email, Phone, Module__c 
            FROM Contact 
            WHERE Module__c != null 
            ORDER BY Module__c];

     for(Contact contObj:contactList)
     {
      List<ContactWrapper> conWrapperList = new List<ContactWrapper>();

      if(mapModule.containsKey(contObj.Module__c))
      {

       conWrapperList = mapModule.get(contObj.Module__c);


       conWrapperList.add(new ContactWrapper(contObj));

       mapModule.put(contObj.Module__c, conWrapperList);


       moduleCountMap.put(contObj.Module__c, conWrapperList.size());
      }
      else
      {

       conWrapperList.add(new ContactWrapper(contObj));
       mapModule.put(contObj.Module__c, conWrapperList);


       moduleCountMap.put(contObj.Module__c, conWrapperList.size());
      }
     }

     return mapProjectType;

    }

    public Class ContactWrapper {

     public ContactWrapper(Contact contObj)
     {
      this.Name = contObj.Name;
      this.Email = contObj.Email;
      this.Phone = contObj.Phone;
      this.Module = contObj.Module__c;
     }

     @AuraEnabled
     public String Name {get;set;}
     @AuraEnabled
     public String Email {get;set;}
     @AuraEnabled
     public String Phone {get;set;}
     @AuraEnabled
     public String Module {get;set;}
    }


   }
Hoping someone could help me on this, and thanks in advance!
 
Best Answer chosen by Ertyq Mrsk
Ertyq MrskErtyq Mrsk
After doing another modifications, I finally got what I am expecting. I distributed values by assigning unique for:item values. Below is the updated html code that works:
 
<template>  
    <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered">
        <thead>
            <tr class="slds-line-height_reset">
                <th class="" scope="col">
                    <div class="slds-truncate" title="contactModule">Module</div>
                </th>
                <th class="" scope="col">
                    <div class="slds-truncate" title="contactName">Name</div>
                </th>
                <th class="" scope="col">
                    <div class="slds-truncate" title="contactEmail">Email</div>
                </th>
                <th class="" scope="col">
                    <div class="slds-truncate" title="contactPhone">Phone</div>
                </th> 
            </tr>
        </thead>
        <tbody>
            <template if:true={mapData}>
                <template for:each={mapData} for:item="keyValue">
                    <tr key={keyValue.key} class="slds-hint-parent">
                        <th scope="col">
                            <div>{keyValue.key}</div>
                        </th>
                        <th scope="col">
                            <template for:each={keyValue.value} for:item="mapValue">
                                <div key={mapValue.Name}>
                                    {mapValue.Name}
                                </div> 
                            </template>
                        </th>
                        <th scope="col">
                            <template for:each={keyValue.value} for:item="mapValue2">
                                <div key={mapValue2.Email}>
                                    {mapValue2.Email}
                                </div> 
                            </template>
                        </th>
                        <th scope="col">
                            <template for:each={keyValue.value} for:item="mapValue3">
                                <div key={mapValue3.Phone}>
                                    {mapValue3.Phone}
                                </div> 
                            </template>
                        </th>
                    </tr>    
                </template>
            </template> 
        </tbody>
    </table>
</template>

 

All Answers

David Zhu 🔥David Zhu 🔥
You may need to remove extra key from for:each loop in HTML to see Email and Phone. 
<template for:each={keyValue.value} for:item="value">
                <div key={value.Name}>
                    <div>{value.Name}</div>
                    <div>{value.Email}</div>
                    <div>{value.Phone}</div>
                </div> 
            </template>

 
Prosenjit Sarkar 7Prosenjit Sarkar 7
Hi Ertyq,

Please change your html code like this, 
 
<template if:true={mapData}>
       <template for:each={mapData} for:item="keyValue">
        <tr key={keyValue.key} class="slds-hint-parent">
            
            <template for:each={keyValue.value} for:item="value">
                <td key={value.key}>
                    <div>{keyValue.key}</div>
                </td>
                   
                <td key={value.Name}>
                    {value.Name}
                </td> 
                <td key={value.Email}>
                    {value.Email}
                </td> 
                <td key={value.Phone}>
                    {value.Phone}
                </td> 
            </template>
        
        </tr>      
       </template>
      </template>

Thanks
Prosenjit
Ertyq MrskErtyq Mrsk
@Prosenjit Tried your code, but name value just scattered horizontally, so I put back the original code.
Ertyq MrskErtyq Mrsk
After doing another modifications, I finally got what I am expecting. I distributed values by assigning unique for:item values. Below is the updated html code that works:
 
<template>  
    <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered">
        <thead>
            <tr class="slds-line-height_reset">
                <th class="" scope="col">
                    <div class="slds-truncate" title="contactModule">Module</div>
                </th>
                <th class="" scope="col">
                    <div class="slds-truncate" title="contactName">Name</div>
                </th>
                <th class="" scope="col">
                    <div class="slds-truncate" title="contactEmail">Email</div>
                </th>
                <th class="" scope="col">
                    <div class="slds-truncate" title="contactPhone">Phone</div>
                </th> 
            </tr>
        </thead>
        <tbody>
            <template if:true={mapData}>
                <template for:each={mapData} for:item="keyValue">
                    <tr key={keyValue.key} class="slds-hint-parent">
                        <th scope="col">
                            <div>{keyValue.key}</div>
                        </th>
                        <th scope="col">
                            <template for:each={keyValue.value} for:item="mapValue">
                                <div key={mapValue.Name}>
                                    {mapValue.Name}
                                </div> 
                            </template>
                        </th>
                        <th scope="col">
                            <template for:each={keyValue.value} for:item="mapValue2">
                                <div key={mapValue2.Email}>
                                    {mapValue2.Email}
                                </div> 
                            </template>
                        </th>
                        <th scope="col">
                            <template for:each={keyValue.value} for:item="mapValue3">
                                <div key={mapValue3.Phone}>
                                    {mapValue3.Phone}
                                </div> 
                            </template>
                        </th>
                    </tr>    
                </template>
            </template> 
        </tbody>
    </table>
</template>

 
This was selected as the best answer