How do I effectively develop a lightning combo box?

Regarding the lightning combo box -

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 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 = ''; //initialise 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

Output

After selection, display the value.