Get distinct value as option in Combobox

apexjavascriptlightning-comboboxlightning-datatablelightning-web-components

HTML :

 <div class="slds-box slds-p-around_none slds-m-top_x-small slds-m-bottom_medium slds-m-horizontal_none">
    <lightning-layout  vertical-align="end">
        <lightning-layout-item padding="around-small" >
            <lightning-combobox
                data-id="List view Combo" 
                name="fieldInfo"
                label="Libellé"
                value={conNameId}
                placeholder="Selectionner un .. "
                options={convNames}
                onchange={handleChange}
                style="color:rgb(245, 39, 11);width:100px;" >
            </lightning-combobox>
        </lightning-layout-item>

        <lightning-layout-item padding="around-small">
            <lightning-combobox
                data-id="List view Combo" 
                name="fieldInfo"
                label="N° Conv"
                value={conNameId}
                placeholder="Selectionner un .. "
                options={convNum}
                onchange={handleChange}
                style="color:rgb(245, 39, 11);width:100px;" >
            </lightning-combobox>
        </lightning-layout-item>

        <lightning-layout-item padding="around-small">
            <lightning-combobox
                data-id="List view Combo" 
                name="fieldInfo"
                label="Année"
                value={conNameId}
                placeholder="Selectionner un .. "
                options={convAnnee}
                onchange={handleChange}
                style="color:rgb(245, 39, 11);width:100px;" >
            </lightning-combobox>

<lightning-datatable data={conventions} columns={convEncoursColumns} key-field="Id" sorted-by={sortedBy} 
                sorted-direction={sortedDirection} 
                onsort={onSort} >
            </lightning-datatable> 

JS :

@wire(getConventionsArchivees)
wiredGetConventions0(result){
    const { data, error } = result;
    if(data) {
      

        this.conventions = result.data.map((record) => {
            let industryClass = record.Annee__c === "2021" ? 'slds-text-color_error': 'defaultText';
            return {...record,
                accountName : record.Client__r?.Name,
                'industryClass': industryClass}
        });
        this.buildColumns(convEnCoursSelector.split(','));

     @wire(getConventionsArchivees)
conventionsName;

get convNames(){      
    if (!this.conventionsName?.data){
        return [];
    }

    return this.conventionsName.data.map(item=> ({
        label : item.Name , value : item.Id
    }));
}



get convAnnee(){      
    if (!this.conventionsName?.data){
        return [];
    }
    return this.conventionsName.data.map(item=> ({
        label : item.Annee__c , value : item.Id
    }));
}
   get convNum(){      
    if (!this.conventionsName?.data){
        return [];
    }
    return this.conventionsName.data.map(item=> ({
        label : item.ConventionNb__c , value : item.Id
    }));
}

buildColumns(items){
    const fieldsToNotDisplay = ['Client__r.Name'];
    this.convEncoursColumns =items
    .filter(field => !fieldsToNotDisplay.includes(field))
    .map(field => this.columns[field] != undefined? this.columns[field] : {label : field , fieldName : field});
}


buildQuery = (query) => {
   
    let clausesArray = [];
    this.buildColumns(query.split(','));
    this.queryGlobale   =  `SELECT ${query} FROM Convention_Formation__c WHERE Id = '${this.conNameId}'`; 
    
}

Apex :

  @AuraEnabled(cacheable=true)
public static Convention_Formation__c[] getConventionsArchivees(){
return [SELECT id, Client__r.Id,ConventionNb__c,Name,
                                      NombreTotalJours__c,Client__r.Name,Annee__c,MontantTotalHT__c
                                      FROM Convention_Formation__c ];

I display in datatable all records retrieved from Apex , but in combobox options i want to display distinct values/labels , now the convNames and convAnnee and convNum as shown as dups which is normal but i couldn't filter on the Get method

2nd question : HandleChange i want to pass the value to the query , should i create another Apex method with the same body as the existing one but with 3 parameters right? Thanks

enter image description here

Best Answer

What you want is a Set. Keep in mind, however, that you'll lose the Id in the process, so you'll have to filter by the value instead of an Id.

// get the names in non-deterministic order
const names = new Set(this.conventionsName.data.map((item)=>item.ConventionNb__c));
// Convert to an Array of unique values
let options = [...names];
// Sort the array
options.sort();
// Expand into list of label, value objects
return options.map((value)=({ label: value, value }));