[SalesForce] Populate radio button options dynamically

I am trying to set a radio button's options dynamically. I'm first constructing a wrapper list in my first component and passing the list to another component where I'm displaying the values.

Apex Controller:

@AuraEnabled
    public static Map<String,List<surveywrapper>> Questions(String partnerName,List<String>selectedCommitteeList){
        Map<String,List<surveywrapper>> surveyMap = new Map<String,List<surveywrapper>>();
        for(Survey_Question_Bank__c survey: [Select Id,Mandatory__c,Question__c,Question_Literal_Backend__c,Section__c,Sub_Section__c FROM Survey_Question_Bank__c ORDER BY Section__c DESC]){
            surveywrapper wrap = new surveywrapper();
            wrap.question = survey.Question__c;
            if(survey.Question_Literal_Backend__c == 'Committee'){
                wrap.optionList = selectedCommitteeList;
            }else{
                wrap.optionList.add('Strongly Disagree');
                wrap.optionList.add('Agree');
            }

            if(surveyMap.containsKey(survey.Section__c)){
                surveyMap.get(survey.Section__c).add(wrap);
            }else{
                surveyMap.put(survey.Section__c, new  List <surveywrapper> { wrap });
            }

        }

        return surveyMap;
    }

Wrapper class in apex:

public class surveywrapper{

        @AuraEnabled public string question{get;set;}
        @AuraEnabled public string questionId{get;set;}
        @AuraEnabled public List<String> optionList{get;set;}
        @AuraEnabled public List<StringWrapper> finaloptionList{get;set;}
        public surveywrapper(){
            mandatory = false;
            selected = false;
            optionList = new List<String>();
            finaloptionList = new List<StringWrapper>();
        }
    }
public class StringWrapper{
        public String option;
    }

Controller of the first lightning component:

action.setCallback(this, function(response) {
                if (response.getState() === "SUCCESS" && component.isValid()) {
                    console.log('response.'+response.getReturnValue());
                    var result = response.getReturnValue();
                    var arrayMapKeys = [];
                    var returnVal = [];
                    for(var key in result){
                        returnVal = result[key];
                        var finalresult = [];
                        var finalList = [];
                        for(var i=0; i<returnVal.length; i++){
                            var options = returnVal[i].optionList;
                            var finaloptions = [];
                            for(var j=0; j<options.length; j++){
                                finaloptions.push({'label':options[j],'value':options[j]});
                                returnVal[i].finaloptionList.push(finaloptions);
                            }

                        }
                        finalresult = returnVal;
                        arrayMapKeys.push({key: key, value: finalresult});
                    }
                    component.set("v.questions", arrayMapKeys);
                }
            });

Response in console:

Section_Name: Array(4)
0: {finaloptionList: Array(2), optionList: Array(2), question: "Question1" …}

I am now passing {!v.questions} to another component where I'm displaying the radio button

<aura:iteration items="{!v.questions}" var="mapKey" indexVar="key">
            <aura:iteration items="{!mapKey.value}" var="quest" >
                    <ui:outputText value="{!quest.question}" class="slds-text-heading_small"/>  

                    <lightning:radioGroup class="customRadioCls" aura:id="options"
                                      name="feedback"
                                      label=""
                                      options="{! quest.finaloptionList }"
                                      disabled="true"
                                      />
            </aura:iteration>
        </aura:iteration>

The final screen is shown as
enter image description here

The options are coming blank. Where am I going wrong?

Best Answer

lightning:radioGroup is itself a container to show the Radio Buttons using attribute for Options. In your code basically you are showing a list of "empty" radio groups by iterating through aura:iteration.

See the Salesforce example as below. You need to specify the options in an attribute. 

<aura:component>
    <aura:attribute name="options" type="List" default="[
    {'label': 'apples', 'value': 'option1'},
    {'label': 'oranges', 'value': 'option2'}
    ]"/>
    <aura:attribute name="value" type="String" default="option1"/>
    <lightning:radioGroup
        aura:id="mygroup"
        name="radioButtonGroup"
        label="Radio Button Group"
        options="{! v.options }"
        value="{! v.value }"
        onchange="{! c.handleChange }"
        required="true" />
</aura:component>

You have to update your codes in similar lines

JS Controller

var finaloptions = [];
for(var j=0; j<options.length; j++){
    finaloptions.push({'label':options[j],'value':options[j]});
}
component.set("v.optionsList",values);

Component Markup

<aura:attribute name="optionsList" type="List" /> 
 ............
 ............
<lightning:radioGroup class="customRadioCls" aura:id="options"
        name="radioButtonGroup"
        label="Radio Button Group Title"
        options="{!v.optionsList}"
        value="{!v.value}" />
Related Topic