Dynamic custom labels and ui:inputSelect

Question

I need dynamically show drop down list with countries. My code:

Controller:

public with sharing class CountryCtrl {

@AuraEnabled
public static List<CountryUtils.CountryProperty> getActiveCountries() {
    List<CountryUtils.CountryProperty> available_countries = new List<CountryUtils.CountryProperty>();
    List<Country__mdt> active_countries_metadata = [SELECT Countrye_ISO_Code__c, Country_Label__c
        FROM Country__mdt WHERE Is_Active__c = true];
    for(Country__mdt each_country : active_countries_metadata) {
        if(each_country.Countrye_ISO_Code__c != null  && each_country.Country_Label__c != null) {
            available_countries.add(new CountryProperty(each_country.Countrye_ISO_Code__c, each_country.Country_Label__c));
        }
    }
    return available_countries;
}

public class CountryProperty {

    public CountryProperty(String countryIsoCode, String countryLabel) {
        this.countryIsoCode = countryIsoCode;
        this.countryLabel = countryLabel;
    }

    @AuraEnabled
    public String countryIsoCode;
    @AuraEnabled
    public String countryLabel;
}

}

and my controller js:

loadAvailableCountries : function(component, helper) {
    var action = component.get('c.getActiveCountries');
    action.setCallback(this, function(response) {
        var state = response.getState();
        if (state === 'SUCCESS') {
            var countries = response.getReturnValue();
            helper.fillDynamicLabel(component, countries);
        }
    });
    $A.enqueueAction(action);
},

fillDynamicLabel: function(component, countries) {
    var mappedCountries = [];
    for(var i = 0; i < countries.length;i++) {
        var labelReference = $A.get('$Label.c.' + countries[i].countryLabel);
        mappedCountries.push({key: countries[i].countryIsoCode, label: labelReference})
    }
    component.set('c.countries', mappedCountries)
}

and component:

<aura:attribute name="countries" type="Object[]" />
<ui:inputSelect aura:id="countries" change="{!c.changeCountryOnSelect}" >
    <aura:iteration items="{!v.countries}" var="c" indexVar="index">
        <ui:inputSelectOption text="{!c.key}" label="{!c.label}"/>
    </aura:iteration>
</ui:inputSelect>

But unfortunately I see:

keys and values are equals. What I do wrong?

Oleksandr Berehovskyi · Accepted Answer · 2017-07-27 17:03:25Z

3

you need to set value

mappedCountries.push({value: countries[i].countryIsoCode, label: labelReference})

edited Jul 27, 2017 at 17:03

answered Jul 27, 2017 at 12:57

Oleksandr Berehovskyi

18.9k4 gold badges48 silver badges66 bronze badges

Add a comment |

Mohit Arora · Accepted Answer · 2017-07-27 13:11:28Z

One small approach though, consider the following changes

Your attribute:

<aura:attribute name="countries" type="CountryUtils.CountryProperty[]" />

JS Controller:

loadAvailableCountries : function(component, helper) {
    var action = component.get('c.getActiveCountries');
    action.setCallback(this, function(response) {
        var state = response.getState();
        if (state === 'SUCCESS' && response.getReturnValue() != null) {
            component.set('c.countries', response.getReturnValue());
        }
    });
    $A.enqueueAction(action);
},

We use wrapper instance CountryUtils.CountryProperty[] here instead of Object[]. That way, you save yourself from calling the method helper.fillDynamicLabel and you use the native lightning.

Stack Exchange Network

Dynamic custom labels and ui:inputSelect

2 Answers 2

You must log in to answer this question.

Hot Network Questions

Dynamic custom labels and ui:inputSelect

2 Answers 2

You must log in to answer this question.

Related

Hot Network Questions