combobox additional values?

Question

I have a piece of JS here for my combobox. it works fine.

@wire(getThemes,{ cabinetId: '$selectCab', brandId: '$selectBrand'})
wiredThemes({error, data }){
           if (data) {
        this.themes = data.map((th) => Object.assign({}, { label: th.Name, value: th.Id }));
    } else if (error) {
        this.error = error;
    }
}  

You can see where i assign label and value, but what if i need a second 'value' like so

@wire(getThemes,{ cabinetId: '$selectCab', brandId: '$selectBrand'})
wiredThemes({error, data }){
           if (data) {
        this.themes = data.map((th) => Object.assign({}, { label: th.Name, value: th.Id, value2: th.customIntegerField__c}));
    } else if (error) {
        this.error = error;
    }
}  

Because later on when you select the option in the combobox i want to do the following

handleThemeSelect(event){
    this.selectTheme = event.detail.value;
    if(event.detail.value2 > 0){
          //do something
          }else if(event.detail.value2 <0) {
           //do something else
              }
}

Because when i look at https://developer.salesforce.com/docs/component-library/bundle/lightning-combobox/specification It looks like only one value can be held. ......SO i would have to get the value and then do ANOTHER apex callout to get the field value to then perform the else if

Answer 1

You can store the extra values in the parent component, at the same time you add to your theme list.

Might be hard to use map here, but you can use a forEach instead.

Something like:

let themes = [];
let themeExtras = {};
data.forEach( th => {
  let theme = Object.assign({}, { label: th.Name, value: th.Id, value2: th.customIntegerField__c });
  this.themes.push(theme);
  this.themeExtras[theme.value] = theme;
});

As you can see, I've put the extras in an object that we retrieve in the handler.

handleThemeSelect(event){
  this.selectTheme = event.detail.value;
  let value2 = this.themeExtras[event.detail.value];
  if(value2 > 0){
      //do something
  }
  else if(value2 <0) {
       //do something else
  }
}

You will likely need some error checking as well here.