Lightning Web Component Combobox

Question

i'm developing lightning web component and i want to fill or populate my combobox from result of apex method so how i can in the html file get the result from JavaScript file and put them in the combobox.

Template:

 <lightning-combobox
            name="Role"
            label="Role Name"
            value={value}
            placeholder=""
            options={rolesList.data.values}
            onchange={handleChange} >
        </lightning-combobox>    

javascript file:

import { LightningElement, track, wire} from 'lwc';

import getRoles from '@salesforce/apex/LeaveSettingsController.getRoles';

@wire(getRoles)
    rolesList;

Answer 1

Though I am late in answering this question, but here is the other approach to populate combo box values.

Controller

Here retrieve UserRole records based on SOQL query and no data transformation in this class

public with sharing class UserRoleController {

    @AuraEnabled (cacheable=true)
    public static List<UserRole> getUserRoles(){
        return [SELECT Id, Name FROM UserRole];
    }
}

js Controller class

In this class, inside wiredUserRoles() method, perform data transformation for value and label.

Use, roleOptions() getter property to return the array.

/* eslint-disable no-console */
import { LightningElement , wire, track} from 'lwc';

//import method which should be used from Controller
import getUserRoles from '@salesforce/apex/UserRoleController.getUserRoles';

let i=0;
export default class DisplayUserRole extends LightningElement {

    @track items = []; //this will hold key, value pair
    @track value = ''; //initialize combo box value

    @track chosenValue = '';

    @wire(getUserRoles)
    wiredUserRoles({ error, data }) {
        if (data) {

            //create array with elements which has been retrieved controller
            //here value will be Id and label of combobox will be Name
            for(i=0; i<data.length; i++)  {
                this.items = [...this.items ,{value: data[i].Id , label: data[i].Name} ];                                   
            }                
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.contacts = undefined;
        }
    }

    //gettter to return items which is mapped with options attribute
    get roleOptions() {
        return this.items;
    }

    handleChange(event) {
        // Get the string of the "value" attribute on the selected option
        const selectedOption = event.detail.value;
        console.log('selected value=' + selectedOption);
        this.chosenValue = selectedOption;
    }

    //this value will be shown as selected value of combobox item
    get selectedValue(){
        return this.chosenValue;
    }
}

HTML

<template>
    <lightning-card title="Display User Role" icon-name="custom:custom63">
        <lightning-combobox
            name="Role"
            label="Role Name"
            placeholder="Choose Role"
            value={value}
            onchange={handleChange}
            options={roleOptions}>
        </lightning-combobox>
        <p></p>
        Selected Value:
        <lightning-formatted-text title="Chosen Key" value={selectedValue}></lightning-formatted-text>
    </lightning-card>

</template>

Output

After selection, display the value.

Answer 2

You need to set a javascript property on the template like below

options={rolesOptions}

and in the javascript file

create a getter function for it

get rolesOptions() {
        return this.rolesList.data.values;
    }

I havent tested this solution but should work theoretically based on this documentation

Answer 3

Apex code:

@AuraEnabled
public static String getValues() {
    SummaryList = new List<Summary>();
    List<Object> ConfigListGrupos = new List<Object>();

    ConfigListGrupos = [SELECT (Filed 1), DCABM_fld_valor__c 
            FROM .....];

    for(Object a : ConfigListGrupos) {
        SummaryList.add(new Summary(a.(Filed 1), a.DCABM_fld_valor__c));               
    }

    String jSONSummaryList = JSON.serialize(SummaryList);
    return jSONSummaryList;
}

public class Summary {
    public String value {get;set;}
    public String label {get;set;}

    public Summary(String param1, String param2) {
        value = param1;
        label = param2;
    }
}

JavaScript Code:

import { LightningElement, track, wire } from 'lwc';
import getValues from '@salesforce/apex/(Your Class).getValues';

export default class MyLWC extends LightningElement {
@track options;

@wire(getValues)
wiredValues({ data, error }) {
    if (data) {
        this.options = JSON.parse(data);
    } else if (error) {
        window.console.log('Error in wiredValues');
        window.console.log(error);
    }
}
}

HTML code:

<template>
  <lightning-combobox
     name="type"
     label="Type values"
     placeholder="Select values"
     options={options}
     data-field="userType"
     required>
  </lightning-combobox>
</template>

Answer 4

Apex Class:

    @AuraEnabled(cacheable=true)
    public static List<OptionWrapper> getRoles(){
       List<OptionWrapper> roleNameList = new List<OptionWrapper>();
       for(userRole role :[SELECT Id, Name FROM UserRole]){
         roleNameList.add(new OptionWrapper(role.Name, role.Name));
       }
       System.debug(roleNameList);
       return roleNameList;
    }

    public class OptionWrapper {
        @AuraEnabled
        public String label {get; set;}
        @AuraEnabled
        public String value {get; set;}

        public OptionWrapper(String label, String value) {
            this.label = label;
            this.value = value;
        }
    }

Template:

  <lightning-combobox
                name="Role"
                label="Role Name"
                value={value}
                placeholder=""
                options={rolesOptions}
                onchange={handleChange} >
            </lightning-combobox>

Js File:

@track value = 'CEO';
@wire(getRoles)
    rolesList; 

    get rolesOptions() {
        // eslint-disable-next-line no-console
        console.log('>>>>'+JSON.stringify(this.rolesList.data));
        return this.rolesList.data;
    }

Answer 5

I feel like previous answers got it right, but didn't highlight what was wrong with the initial code. The main caveat here is what you're passing to options attribute of the <lightning-combobox/>: rolesList.data.values. It's most likely that your controller method is returning a List<String>, which is interpreted as an array of strings on the receiving end. So your roleList.data will most likely contain an array of strings, which is not a suitable input for lightning-combobox's options.

As per the doc's JS example, it accepts an array of objects that have label and value keys. Now, it's not very convenient to generate that in Apex, rather I would make this array in the component's JS file's @wire-provisioned function. The following example provides a more concise version of some of the earlier answers.

@wire(getUserRoles) getUserRoles({ data, error }) {
    if (data) {
        this.rolesList = data.map(role => ({ label: role, value: role }));
    } else {
        console.debug(error);
    }
};

And then use rolesList variable in the template:

   <lightning-combobox
        name="Role"
        label="Role Name"
        value={value}
        placeholder=""
        options={rolesList}
        onchange={handleChange} >
    </lightning-combobox>