Lightning dualListBox doesn't show the text of values

Question

I have a dualListBox which should get it's values from a multi-picklist field and it looks like the values are populating but I can't actually see the text.

Order_Tech_Docs.cmp

    <aura:attribute name="options" type="List" default="[]"/>

    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
        <lightning:card>
            <div class="resultsCardComp">
                <aura:if isTrue="{!not(empty(v.cartLineItems))}">
                    <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_striped slds-p-around_x-small">
                        <thead>
                            <tr>
                                <th class="" scope="col"><div class="slds-truncate tableHeader" title="{!$Label.c.Product_Name}">{!$Label.c.Product_Name}</div></th>

                                <th class="" scope="col"><div class="slds-truncate tableHeader" title="{!$Label.c.Tech_Doc_Type}">{!$Label.c.Tech_Doc_Type}</div></th>

                                <th class="" scope="col"><div class="slds-truncate tableHeader" title="{!$Label.c.Tech_Doc_Type}">{!$Label.c.Remove}</div></th>

                                <th class="" scope="col"><div class="slds-truncate" title=""></div></th>
                            </tr>
                        </thead>
                        <tbody>
                        <aura:iteration items="{!v.cartLineItems}" var="cartItem" indexVar="index">
                            <tr aura:id="cartTableRow" id="{!index}">
                                <td class="productName"><ui:outputText value="{!cartItem.productName}"/></td>

                                <td>
                                    <lightning:dualListbox class="darkText" name="languages"
                                    label= "Select Languages"
                                    sourceLabel="Available"
                                    selectedLabel="Selected"
                                    fieldLevelHelp="Select your preferred languages"
                                    options="{!v.options}"
                                    onchange="{!c.handleChange}"
                                    />
                                </td>

                                <td><lightning:buttonIcon iconName="utility:close" variant="bare" value="{!cartItem}" name="{!index}" onclick="{! c.handleProductRemove }" alternativeText="{!$Label.c.Remove}" /></td>
                            </tr>
                            <lightning:input aura:id="hiddenInput" value="{!cartItem}" class="slds-hidden hiddenInput" />
                        </aura:iteration>
                        </tbody>
                    </table>
                    <br/><br/>
                    <center>
                        <lightning:button label="{!$Label.c.Proceed_to_Checkout}" variant="brand" onclick="{!c.checkOut}"></lightning:button>
                    </center>
                </aura:if>
            </div>
        </lightning:card>
</aura:component>

Order_Tech_DocsController.js

({
    doInit : function(component, event, helper) {

        var actionGetAllDocTypes = component.get("c.getDocumentTypes");
        actionGetAllDocTypes.setCallback(this, function(a){
            if(a.getState() === "SUCCESS") {
                component.set("v.options", a.getReturnValue());
                console.log("return value -> " + a.getReturnValue());
            }
        });
        $A.enqueueAction(actionGetAllDocTypes);

        helper.getContactDetails(component, event);
    }, 

    handleChange: function(component, event) {
        var selectedOptionValue = event.getParam("value");
        alert(selectedOptionValue.toString());
    },
})

Relevant Order_Tech_Docs_Controller.cls

    @AuraEnabled
    public static List<String> getDocumentTypes() {
        List<String> options = new List<String>();
        Schema.DescribeFieldResult fieldResult = GT_Tech_Doc__c.Addtional_Documents_Required__c.getDescribe();
        List<Schema.PicklistEntry> pListEntries = fieldResult.getPicklistValues();
        for (Schema.PicklistEntry p : pListEntries) {
            options.add(p.getLabel());
        }
        return options;
    }  
}

The console.log statement in Order_Tech_DocsController.js displays my expected results in the Chrome console.

I have tried hardcoding some values for the list and can see them so it is not something stupid like my css text colour is white!

Answer 1

Because DualList expecting data in label, value format. But you are not provinding data in supported format.Convert your data in label, value and then use that

for(var key of a.getReturnValue()) {
        var item = {
            "value":  key,
            "label": key
        };
        dataImportFields.push(item);
}
cmp.set('v.options', dataImportFields);

Or as suggested by SFDCfox, you can also do this

dataImportFields = a.getReturnValue().map(key=> ({ value: key, label: key }))
cmp.set('v.options', dataImportFields);

official docs: https://developer.salesforce.com/docs/component-library/bundle/lightning:dualListbox/example#lightningcomponentdemo:exampleDualListboxRequiredValues

Answer 2

As also told in Documentation i guess you are suppose to send the options in below format

[{ label: 'English', value: 'en' },
        { label: 'German', value: 'de' },
        { label: 'Spanish', value: 'es' },
        { label: 'French', value: 'fr' },
        { label: 'Italian', value: 'it' },
        { label: 'Japanese', value: 'ja' }]

not just labels but there values too.