I am making a Lightning Web Component and for it I want to populate a dual list box with a list of records, with the value of one field being the label and the ID of the record as the value. I am using wire to pull the records via an Apex controller but really struggling to figure out how I can subsequently loop over that to push the two values into both label and value for the dual list box options.
JS
import { LightningElement, wire } from 'lwc';
import getdualRecords from '@salesforce/apex/DualListController.records';
export default class scratchtest extends LightningElement {
_selected = [];
options = [];
@wire(getdualRecords , { email: '[email protected]' })
recordresults({data,error}) {
data && this.options = data.map(record => ({value: record.Id, label: record.Name}));
}
get selected() {
return this._selected.length;
}
handleChange(e) {
this._selected = e.detail.value;
}
HTML
<template>
<lightning-card>
<div class="slds-p-around_small">
<lightning-dual-listbox
name="testduallist"
label="Select Records"
source-label="Available Records"
selected-label="Linked Records"
field-level-help="Select records"
options={options}
onchange={handleChange}
disable-reordering=true
></lightning-dual-listbox>
</div>
</lightning-card>
</template>
Apex
public class DualListController{
@AuraEnabled(cacheable=true)
public static List<Object__c> records(String email) {
return [
SELECT Id, Name
FROM Object__c
WHERE Email__c = :email AND Active__c = TRUE
WITH SECURITY_ENFORCED
];
}
}