[SalesForce] LWC Get Combobox Option from custom Object

I am making a combobox and am expecting to get the values from the ID and Name of the custom object. I am getting an error:

property 'values' of undefined

The Apex: I have tested the SOQL in the dev console and it returned the expected results of Name , ID

public with sharing class EventListController {

    @AuraEnabled(Cacheable=true)
    public static Events2__c[] getAllEvents() {

       return [SELECT Name, Id 
           FROM Events2__c  ];

    }
}

The html:

<template>
<lightning-card title={valueText}>
    <template if:false={hasResults}></template>
    <div class="slds-card__body_inner">
        <lightning-combobox
            name="progress"
            label="Select the event you want to manage."
            value={value}
            placeholder="Select Event"
            options={eventOptions}
            onchange={handleEventMgrChange} >
        </lightning-combobox>
    </div>
</lightning-card>

And the js in force-app/main/default/lwc/eventSelectPub/eventSelectPub.js:

import { LightningElement, track, wire } from 'lwc';
import getEvents from 
'@salesforce/apex/EventListController.getAllEvents';

export default class EventSelectPub extends LightningElement {
@track value = 'inProgress';
valueText = "Select Event";
@wire(getEvents)
eventsList;

get eventOptions() {
    return this.eventsList.data.values;
    // this one works:
    // return [
    //     { label: 'Family', value: 'family' },
    //     { label: 'Friends', value: 'friends' },
    //     { label: 'Other', value: 'other' },
    // ];
}

 handleEventMgrChange(event) {
    this.value = event.detail.value;
    this.valueText = "Event Selected";        
 }
 get hasResults() {
    return (this.eventsList.data.length > 0);
 }
}

I get the error message:

[afterRender threw an error in 'c:eventSelectPub' [Cannot read property 'values' of undefined]]
new Aura.externalLibraries()@https://dream-flow-2707.lightning.force.com/auraFW/javascript/5fuxCiO1mNHGdvJphU5ELQ/aura_prod.js:288:363
{anonymous}()@https://dream-flow-2707.lightning.force.com/auraFW/javascript/5fuxCiO1mNHGdvJphU5ELQ/aura_prod.js:55:1

Best Answer

The issue is here.

get eventOptions() {
    return this.eventsList.data.values;
}

this.eventsList.data is an array and does not have any values attribute.You can check the documentation, the array will be returned in data attribute You have to iterate over your eventList and create an array of options that can be used with Combobox.

Something like:

get eventOptions() {
    var returnOptions = [];
    if(this.eventsList.data){
        this.eventsList.data.forEach(ele =>{
            returnOptions.push({label:ele.Name , value:ele.Name});
        }); 
    }
    console.log(JSON.stringify(returnOptions));
    return returnOptions;
}
Related Topic