0

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:

enter image description here

keys and values are equals. What I do wrong?

2 Answers 2

3

you need to set value

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

0

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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .