0

I am fetching selected fields label from lightning Combobox but I am not getting the label

HTML file

        <lightning-dual-listbox name="Select Fields to display"
        label="Select Fields to display"
        source-label="Available"
        selected-label="Selected"
        field-level-help="Select fields which you want display in the list view"
        options={options}
        value ={selectedFields}
        onchange={handleSelectFieldToDisplay}></lightning-dual-listbox>

js file

  @track selectFieldToDisplay = null;
 @track getUpdateSelectedFieldLabel = null;


      get options()
       {
     return [
    { label: 'Account Name  ', value: 'AccountId' },
    { label: 'Application Type', value: 'Application_Type__c' },
    { label: 'Bedroom Size  ', value: 'Bedroom_Size__c' },
    { label: 'Certified Income of Household ', value: 'Certified_Income__c' },
    { label: 'Eff Date of Cert (If unk-today date)  ', value: 'Effective_Date_Certification__c  ' },
    { label: 'eFile Number', value: 'CaseNumber' },
    { label: 'eFile Owner', value: 'OwnerId' },
    { label: 'Explain the Increase  ', value: 'Explain_the_Increase__c  ' },
    {label: 'Household Name', value:'Household__c'},    
    { label: 'Household Size    ', value: 'House_hold_name__c' },
    { label: 'Income Set Aside (%)', value: 'Income_Set_Aside__c' },
    { label: ' Property Name', value: 'PropertyCase__c' },
    { label: ' Property Staff Name', value: 'Property_Staff_Name__c ' },
    { label: 'Program Type', value: 'Program_Type__c    ' },
    { label: 'Rent Set Aside (%)', value: 'Rent_Set_Aside__c' },
    { label: 'Status', value: 'Status' },
    { label: 'Unit', value: '   Unit__c' },
    { label: 'Unit Type ', value: 'Unit_Type__c ' }

   ]
  }

// function

    handleSelectFieldToDisplay(event)
    {

 console.log('events'+event.detail.value);
this.selectFieldToDisplay = event.detail.value;
 this.getUpdateSelectedFieldLabel = event.target.options.find(opt => opt.value === 
event.detail.value).label;
if(Array.isArray(this.getUpdateSelectedFieldLabel)) {
    this.getUpdateSelectedFieldLabel = this.getUpdateSelectedFieldLabel.join(';');
  }


   }

     handleUpdateSelectFieldsToDisplay()
    {

  updateSelectFields({
    fields : this.getUpdateSelectedFieldLabel,
    listViewId : this.selectedListViewID
   }).then(data =>{
  if(data === true)
  {
this.handleFetchSelectFieldToDisplay(this.selectedListViewID);
this.SelectFieldToDisplayBox = false;

 }
}).catch(error=>{

 this.dispatchEvent(
    new ShowToastEvent({
        title: 'Error'+error.message,
        message: '',
        variant: 'Error',
    }),
);
})



}

Please tell the solution why I am not getting field label

2

This is how you can do it.

handleSelectFieldToDisplay(event) {
    this._selected = event.detail.value;
    console.log(this._selected);
    let selectlabels = [];

    this._selected.forEach(option => {
        let currentOption = this.options.find( o => o.value === option);
        selectlabels.push(currentOption.label);
    });
    console.log('selected labels => ' + selectlabels);
}

Check the Playground.

Update

As suggested by @sfdcfox. You can actually do it like below Instead of using forEach.

handleSelectFieldToDisplay(event) {
    this._selected = event.detail.value;
    console.log(this._selected);
    let selectLabels = this._selected.map(option => this.options.find(o => o.value === option).label);
    console.log('selected labels => ' + selectLabels);
}

Playground

| improve this answer | |
  • 2
    +1 though: let selectLabels = this._selected.map(option => this.options.find(o => o.value === option).label); – sfdcfox Apr 28 at 9:29
  • @sfdcfox Ohh I didn't think of that, it is an easier approach. Thanks! – rahul gawale Apr 28 at 12:42
  • Thanks @sfdcfox – Harshit Verma bluCursor Apr 28 at 13:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.