2

I am new to SF.

I am trying to do something like this: https://www.forcetrails.com/2019/11/how-to-create-slds-table-with-cell.html, but my table data is not being rendered... what is wrong in my for:each?

HTML:

     <tbody>
        <template if:true={contract}>
            <template for:each={contract} for:item="ct">
                <tr key={ct.rn} class="slds-hint-parent">
                    <td rowspan={ct.rowspan}>{ct.rn}</td>
                </tr>
                <template for:each={rn.contracts} for:item="contract">
                    <tr key={contract.Id}>
                        <td key={contract.expr0}>
                            {contract.expr0} {contract.expr1} <!-- Grace Period End Date (Month and Year) -->                                  Month and Year -->
                        </td>
                        <td key={contract.pn}>
                            {contract.pn} <!-- Membership Product / Level -->
                        </td>
                    </tr>
                </template>
            </template>
        </template>
    </tbody>

JS

import { LightningElement, wire } from 'lwc';
import getMemberships from '@salesforce/apex/CustomDataTableController.getMemberships';

export default class customDataTableLWC extends LightningElement {

    contracts;
    contract = [];

    @wire(getMemberships)
    getMemberships({ data, error }) {
        if (data) {
            this.contracts = JSON.parse(JSON.stringify(data));
            this.error = undefined;

            let groupedDataMap = new Map();

            this.contracts.forEach(contract => {
                if (groupedDataMap.has(contract.rn)) {
                    groupedDataMap.get(contract.rn).contracts.push(contract);
                } else {
                    let newContract = {};
                    newContract.rn = contract.rn;
                    newContract.contracts = [contract];
                    groupedDataMap.set(contract.rn, newContract);
                }
            });
    
            let itr = groupedDataMap.values();
            let result = itr.next();

            while (!result.done) {
                result.value.rowspan = result.value.contracts.length + 1;
                this.contract.push(result.value);
                result = itr.next();
            }
    
            console.log(this.contract);

        } else if (error) {
            console.error(error);
            this.contracts = undefined;
        }
    }
}

Contract array in a nutshell

enter image description here

Contract array expanded (open to better view)

enter image description here

Output:

enter image description here

Expected (example):

enter image description here

0

1 Answer 1

4

It looks like your variable references are not quite right. Please use different variable names for each reference to avoid confusion.

Existing:

There is no rn nor rn.contracts.

<tbody>
    <template if:true={contract}>
        <template for:each={contract} for:item="ct">
            <tr key={ct.rn} class="slds-hint-parent">
                <td rowspan={ct.rowspan}>{ct.rn}</td>
            </tr>
            <template for:each={rn.contracts} for:item="contract">
                <tr key={contract.Id}>
                    ...
</tbody>

New:

Be sure to reference the item object "ct", ct = {rn: 'Membership', rowspan: 10, contracts: [{}, ...] and label uniquely the new items in your Contract Record Type "contracts" array. Also, just use one key like @CasparHarmer wrote in the comments.

<tbody>
    <template if:true={contract}>
        <template for:each={contract} for:item="ct">
            <tr key={ct.rn} class="slds-hint-parent">
                <td rowspan={ct.rowspan}>{ct.rn}</td>
            </tr>
            <template for:each={ct.contracts} for:item="contract_record">
                <tr key={contract_record.Id}>
                    ...
</tbody>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .