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.

LeaveSettingsController.getRoles
return, aList<String>
? – Jayant Das Apr 10 '19 at 12:46