How retreive the selected option for ui:inputSelect on component load?

Question

I'm working on a lightning app with variety of questions that the user answers by selecting an option from a ui:inputSelect component and then saves their answers to a field on my object. I have save working just fine, but when someone opens up the app again, the picklist defaults to the first value in the list instead of the selected value.

In my init function, I have a line where I find the value of the field that I want to retrieve, store it in a variable called 'test' and am able to log the value into my console. I just don't quite understand how to then pre-select my picklist with the value from this field.

I followed this tutorial in the documentation to get the general functionality of the list working and saving, but am not sure what steps to take to pick the selected value from the picklist on load. Here is the code I have so far:

edit I adjusted my init function to set the value instead of the text attribute on my component, but it's still defaulting to the first value in the drop-down instead of the correct value.

sparkAssessment.cmp

 <ui:inputSelect aura:id="inputAudiencePersona01" change="{!c.onAudiencePersona01Change}">
                    <ui:inputSelectOption text="0" label="N/A"/>
                    <ui:inputSelectOption text="1" label="Strongly Disagree"/>
                    <ui:inputSelectOption text="2" label="Disagree"/>
                    <ui:inputSelectOption text="3" label="Neutral"/>
                    <ui:inputSelectOption text="4" label="Agree"/>
                    <ui:inputSelectOption text="5" label="Strongly Agree"/>
    </ui:inputSelect>

 <ui:outputText class="result" aura:id="resultAudiencePersona01" value="{!v.assessments.Maturity_Audience_Persona_01__c}" />

 <ui:button class="form-control slds-m-bottom--x-large" aura:id="button" label="Save My Answers" press="{!c.save}"/>

sparkAssessmentController.js

({
    init : function(component, event, helper) {
         var action = component.get("c.getAssessments");

         action.setParams({
             "assessmentId": component.get("v.recordId")
         });

    // Register the callback function
    action.setCallback(this, function(data) {
        component.set("v.assessments", data.getReturnValue());

        //Get the value of the object field
        var test = component.get("v.assessments.Maturity_Audience_Persona_01__c");

        component.find("inputAudiencePersona01").set("v.value", test);

        console.log(test);
        console.log("Init ran");
    });

    // Invoke the service
    $A.enqueueAction(action);

}, 
save : function(component, event, helper) {

    var action = component.get("c.saveAssessment");
    var assessments = component.get("v.assessments");  
    var toastEvent = $A.get("e.force:showToast");

    action.setParams({"assessment": assessments});
    $A.enqueueAction(action);

    toastEvent.setParams({
        "title": "Success!",
        "message": "The record has been updated successfully."
    });
    toastEvent.fire();

},  

     onAudiencePersona01Change: function(cmp) {
          var selectCmp = cmp.find("inputAudiencePersona01");
          var resultCmp = cmp.find("resultAudiencePersona01");
          resultCmp.set("v.value", selectCmp.get("v.value"));
})

Answer 1

you need to set the component's value instead of text attribute,like this:

component.find("inputAudiencePersona01").set("v.value", test);

-Update-

Looks, like the variable test is a Number instead of String datatype, but ui:inputSelect expects the value attribute to be of String type. So all you need to do is, convert the value to String type:

component.find("inputAudiencePersona01").set("v.value", test.toString());

Answer 2

You can set the value in the ui:input tag itself, like this:

<ui:inputSelect aura:id="inputAudiencePersona01" change="{!c.onAudiencePersona01Change}" value="{!v.test}">