Lightning Web Component Combobox

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.

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

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> 

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; } 

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>