4

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

3

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;
}
2
  • This does work, great explanation. – Dan Jan 1 '20 at 21:07
  • 3
    You could have used Array.map, which is more idiomatic in JavaScript. – sfdcfox Jan 1 '20 at 22:52
0

@Dan

lightning-combobox is expecting the JS-Array to be in the form you mentioned demonstrated that works:

 [
    { label: 'Family', value: 'family' },
    { label: 'Friends', value: 'friends' },
    { label: 'Other', value: 'other' },
 ];

Any array of JS-Objects with two properties each: label & value.

Your controller will return an object in the form (most likely) something like:

[
   { id: "...", name: "..." },
...
]

You should update your controller class to return a DTO (Data-transfer object, a new class defined in apex or converting Events2__c to the previous format, or convert it in JavaScript after it's been returned

get eventOptions() {
// here - use a iterative loop to convert `this.eventsList.data.values` 
// to a new JS array of objects, 
// Return value should be of form: [ { label: "...", value: "..." },...]
    this.eventsList.data.values;
}
3
  • Looks like three paths I need better understanding: 1) DTO (Data-transfer object, a new class defined in apex or converting Events2__c to the previous format, or convert it in JavaScript after it's been returned. I tried the converting to Javascript and that worked... – Dan Jan 1 '20 at 21:09
  • @Dan more like let server-side do extra processing for proper format or let client-side do it for you. I prefer client-side for this as modern devices are very powerful and easily handle these data changes – Pranay Jaiswal Jan 1 '20 at 21:19
  • @PranayJaiswal, Yes I can to the same conclusion. Not very heavy lifting for the client. Lots to learn in al of this. – Dan Jan 1 '20 at 21:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.