How to pass values to Lightning dual listbox?

Question

html:

 <template>
    <lightning-dual-listbox name="languages"
                            label="Select Languages"
                            source-label="Available"
                            selected-label="Selected"
                            field-level-help="Select your preferred languages"
                            options={options}
                            onchange={handleChange}></lightning-dual-listbox>
    <div class="slds-box" >
        <p>Selected values are: {selected}</p>
    </div>
</template>

js:

import { LightningElement, wire } from 'lwc';
import getObjectLabels from '@salesforce/apex/metadataController.getObjectNames';

export default class DualListboxSimple extends LightningElement {
    @wire(getObjectLabels) contacts;
    _selected = [];

    get options() {
       console.log(this.contacts.data);
       return this.contacts.data;
        // return [
        //     { label: 'English', value: 'en' },
        //     { label: 'German', value: 'de' },
        //     { label: 'Spanish', value: 'es' },
        //     { label: 'French', value: 'fr' },
        //     { label: 'Italian', value: 'it' },
        //     { label: 'Japanese', value: 'ja' },
        // ];
    }

    get selected() {
        return this._selected.length ? this._selected : 'none';
    }

    handleChange(e) {
        this._selected = e.detail.value;
    }
}

Apex:

public class metadataController {
    @AuraEnabled(Cacheable=true)
    public static List<dualboxOption>  getObjectNames(){
        // Tooling API callout to return list of objects, TBD: dynamic session ID
        String baseURL =  System.URL.getSalesforceBaseUrl().toExternalForm();
        String endpoint = baseURL + '/services/data/v55.0/tooling/query/?q=Select+MasterLabel+from+EntityDefinition+WHERE+IsCustomizable=true';
        HttpRequest req = new HttpRequest();
        req.setEndpoint(endpoint);
        req.setMethod('GET');
        req.setHeader('Authorization', 'Bearer ' + '...');
        req.setHeader('Content-Type', 'application/json');
        Http h = new Http();
        HttpResponse res = h.send(req);
        system.debug(res.getBody());

        //Parsing payload into map and then extracting list of records (these are Salesforce objects)
        Map<String, Object> reponsePayload = (Map<String, Object>) JSON.deserializeUntyped(res.getBody());
        List<Object> reseponsePayloadRecords = (List<Object>) reponsePayload.get('records');

        List<String> objectLabels = new List<String>();
        List<dualboxOption> objectList = new List<dualboxOption>();

        //Extracting MasterLabel from the lsit of records
        for(Object record : reseponsePayloadRecords){
            String json = JSON.serialize(record);
            Map<String, Object> recordMap = (Map<String,Object>) record;
            objectLabels.add((String)recordMap.get('MasterLabel'));
        }

        //After extracting labels, for each label creating a dualboxOption to display in LWC
        for(String objectLabel : objectLabels){
            dualboxOption singleObject = new dualboxOption();
            singleObject.label = objectLabel;
            singleObject.value = objectLabel;
            objectList.add(singleObject);
        }
  return objectList;
  
    }
    class dualboxOption{
        public string label;
        public string value;
    }
}

My problem is that the LWC component does render with options to select, but they don't have any name. I can select the values and I see that there are options, but they are missing any data. Where am I going wrong?

Response data in console (options method in js controller):

(137) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]

Answer 1

List exists in console with object in each array as empty, this means the properties is not exposed to LWC.

To resolve the issue, try adding:

1. @AuraEnabled to the response data properties of inner class.
2. Mark properties as getter and setter.

Example:

public class DualboxOption {
    @AuraEnabled
    public string label { get; set; }
    @AuraEnabled
    public string value { get; set; }
}