1

Controller code

<div class="slds-form-element__control">        
                        <lightning:select name="customergroup" aura:id="conCountry" onchange="{!c.onControllerFieldChange}" label="Customer Group" value="{!v.accountRequest.SAH_ACCT_GRP__c}">
                            <aura:iteration items="{!v.customerGroupPicklist}" var="stat">
                                <aura:if isTrue="{!v.accountRequest.SAH_ACCT_GRP__c  == stat.value}">
                                    <option text="{!stat.label}" value="{!stat.value}" selected="true"/>
                                    <aura:set attribute="else">
                                        <option text="{!stat.label}" value="{!stat.value}"/>
                                    </aura:set>
                                </aura:if>
                            </aura:iteration>
                        </lightning:select>
                    </div>

I have the following piece of code in my JS controller. The below code is called onchane

var controllerValueKey = event.getSource().get("v.value");

Here the above code is called when picklist value is changed. Here var is correctly pickling up the API value of a picklist field which I have chosen. The API name and labels are different for my picklist values.

customerGroupPicklist is populated in doinit

What I want is the label instead.

Can I do this in my JS?

  • what component are you using for your picklist? (please update your post with this information) – glls Mar 25 '18 at 15:59
  • @glls have updated with component code. – Rimii Mar 25 '18 at 16:11
  • I would not put an aura if in an iteration unless you want performance problems. Preprocess your list first and you'll probably solve both performance and your label/value issue – Caspar Harmer Mar 25 '18 at 18:04
6

To get the label, you're simply going to need to find the correct label based on the value. Here's one way you can do that:

var value = event.getSource().get("v.value"),
    labelForValue = component.get("v.customerGroupPicklist")
    .reduce( (a, v) => a || (v.value == value? v.label: ""), "");

Where "reduce" is an array function that is used to reduce the values of the array to a single value, in our case, the label that we're interested in looking for. This isn't the only possible solution, but just one of several that would work.

| improve this answer | |
  • v.label is coming up as undefined. I am not exactly sure where a I going wrong @sfdcfox – Rimii Mar 25 '18 at 17:39
  • @Rimii (a, v) are two parameters in an arrow function, and label is the value in your data object. If you called it something else, you'd need to change the code. It looks like it should be working though. You'll need to do some debugging. – sfdcfox Mar 25 '18 at 19:01
  • @Rimii Check for case sensitivity of the field name and values. If the value is valid, it should automatically be selected. – sfdcfox Mar 25 '18 at 21:06

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.