+ Start a Discussion
Artem Kalus 7Artem Kalus 7 

Lightning Web Component nested iteration in a table causes column duplication

I have a problem with nested iteration elements in LWC. It is duplicating a column from a parent row instead of displaying what is needed.

In order to reproduce the problem create a test Lightning App and drop testLWC component on it. When "Test" button is clicked a new row is generated in a table, however, the "Upload" button in column 3 is not supposed to be there.


testLWC.html:
<template>

    <div class="slds-box">
        <lightning-card  title="Test Component" icon-name="standard:file">
            <lightning-button label="Test" onclick={testFunction} slot="actions"></lightning-button>


            <table class="slds-table slds-table_cell-buffer slds-table_header-hidden slds-table_bordered">
                <tbody>
                    <template for:each={sections} for:item="section" for:index="indexParent">
                        <tr key={section.index}>
                            <td>
                                {section.Name}
                            </td>
                            <td>
                                col 2
                            </td>
                            <td>
                                <lightning-button label="Upload" onclick={testFunction} ></lightning-button>
                            </td>
                            <td>
                                col 4
                            </td>
                        </tr>
                        <template for:each={section.rowList} for:item="row" for:index="indexChild">
                            <tr key={row.index}>
                                <td>
                                    {row.Name}
                                </td>
                                <td>
                                    child col 2
                                </td>
                                <td>
                                    child col 4
                                </td>
                                <td>
                                    child col 4
                                </td>
                            </tr>
                        </template>
                    </template>
                </tbody>
            </table>
            
        </lightning-card>
    </div>
</template>

testLWC.js:
import { LightningElement, track } from 'lwc';

export default class TestLWC extends LightningElement {

    @track sections =   [
                        {Name:"Section 1", rowList:[]} //{Name:"Row 1"},{Name:"Row 2"},{Name:"Row 3"}
                        ,{Name:"Section 1", rowList:[]}
                        ]; //{Name:"Row 1"},{Name:"Row 2"},{Name:"Row 3"}]}

    connectedCallback(){
        // default logic
    }

    testFunction(){
        this.sections[0].rowList.push({Name:'Test'});
    }

}
Before Click:
Before ClickAfter Click:
After Click
Best Answer chosen by Artem Kalus 7
Artem Kalus 7Artem Kalus 7
If anyone has this problem, make sure "key" attributes are unique.

All Answers

Artem Kalus 7Artem Kalus 7
If anyone has this problem, make sure "key" attributes are unique.
This was selected as the best answer
Moni Jaiswal 3Moni Jaiswal 3
Hi @Artem,

I am facing one issue with the nested iteration,
Suppose I have one button in child loop and i want index of parent and child loop both in onclick function of JS file.

I am only getting index of child loop through event.target.value.
Not sure how to get index of parent.
Your help would be appreciated.