How can i get selected label from lightning dual listbox

Question

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

Answer 1

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