Unable to capture data on onrowselection in datatable LWC

Question

Unable to capture selected rows details in LWC datatable, here is code On selection passing selectedData is showing duplicate data in alert, I need to populate selected rows details(selectedData) in new table after capturing.

If I select 3 records,R1,R2,R3, it is duplicating like R1R1R2R1R2R3, How to remove this diplicate.

It is producing array of jsons like [{R1}{R1}{R2}{R1}{R2}{R3}]

HTML code:

<lightning-datatable 
   key-field="id"data={data} 
   columns={columns} 
   onrowselection= {selectedRowHandler}> 
</lightning-datatable>

JS code:

import { LightningElement,api,track,wire } from 'lwc';
import getProds from '@salesforce/apex/MM_ProdsInfo.getProducts';
    export default class GetProdsData extends LightningElement {

@track data = [];
selectedData = []; // will pass selected records into new table view
@track error;
@wire(getProds)
    wiredProducts({
        error,
        data
    }) {
        if (data) {
            this.data = data;
} else if (error) {
            this.error = error;
        }
    }


    selectedRowHandler(event){
    const selectedRows = event.detail.selectedRows; 
     for ( let i = 0; i < selectedRows.length; i++ ){             
                if ( !this.selectedData.includes(selectedRows[i].id) )
                    this.selectedData =[...this.selectedData, selectedRows[i]];
           }
           alert('@@:::NEW DATA:::'+JSON.stringify(this.selectedData));
        }

Answer 1

onrowselection is fired on every row selection passing all selected rows each time. This is why you're getting duplicates.

That is I believe is something that you see and what you're trying to filter out by

if ( !this.selectedData.includes(selectedRows[i].id) ) 
    this.selectedData =[...this.selectedData,     selectedRows[i]];
}

The problem is that you're trying to check id only, while your list contains objects. So you can either try and check for the whole object like this

if ( !this.selectedData.includes(selectedRows[i]) ) 
        this.selectedData =[...this.selectedData,     selectedRows[i]];
    }

Or create a mapped array to store data and check against it

import { LightningElement,api,track,wire } from 'lwc';
import getProds from '@salesforce/apex/MM_ProdsInfo.getProducts';
    export default class GetProdsData extends LightningElement {

@track data = [];
_selectedData = {} ; // will pass selected records into new table view
@track error;
@wire(getProds)
    wiredProducts({
        error,
        data
    }) {
        if (data) {
            this.data = data;
} else if (error) {
            this.error = error;
        }
    }

    get selectedData() {
        return Object.values(this._selectedData)
    } 


selectedRowHandler(event){
const selectedRows = event.detail.selectedRows; 
 for ( let i = 0; i < selectedRows.length; i++ ){             
        this._selectedData[selectedRows[i].id] = selectedRows[i] 
       alert('@@:::NEW DATA:::'+JSON.stringify(this.selectedData));
    }