[SalesForce] Lightning Combobox using elements from an apex class

I have the following functions

Apex

public class SchedulableClasses {
    @AuraEnabled(cacheable=true)  
    public static List<ApexClass> SchedulableClasses(){

        ApexClass[] schedulableClasses = (ApexClass[])
  [FIND 'implements schedulable' IN ALL FIELDS RETURNING ApexClass(NamespacePrefix, Name)][0];

ApexClass[] realSchedulables = new ApexClass[0];
for(ApexClass klass: schedulableClasses) {
  try {
    Object t = JSON.deserialize('{}', 
      klass.NamespacePrefix == null? 
        Type.forName(klass.Name):
        Type.forName(klass.NamespacePrefix, klass.Name));
    if(t instanceOf Schedulable) {
      realSchedulables.add(klass);
    }
  } catch(TypeException e) {
    // Ignore
  }
}
    return realSchedulables;
    }
}

The first function gets for me a list of apex classes that are schedulable
HTML

<template>
<div>
    <lightning-combobox placeholder="Select Apex Class" options={apexOptions} value={value} onchange={handleApexChange}></lightning-combobox>
    </div>
</template>

I'm trying to put these values in this combobox with the help of javascript

JS

 handleApexChange(event) {
        this.value = event.detail.value;
    }
    get apexOptions() {
        return [
            apexclass.forEach(element => {
                label: this.apexclass.data.Name, value:this.apexclass.data.name

            });
        ]
    }

So I tried getting inside the List of apex classes that i have. In order to define the labels and values i want to give. But the problem here is the calling for the elements in the javascript since there's more then one element i need to use for or foreach, but the way to call the apex elements from javascript i think it is wrong.

PS the import the and wire methods exist in the javascript they are not missing.

Best Answer

Your apex class has no problem. Import track and your class in LWC js file. Then use below code inside the class:

@track apexOptions = [];
connectedCallback() {
    getSchedulableClasses()
        .then((result) => {
            console.log('result => ', JSON.stringify(result));
            this.apexOptions = result.map((cls) => Object.assign({}, { label: cls.Name, value: cls.Name }));
        })
        .catch((error) => {
            console.error('error => ', error); // use proper error handling
        });
}
handleApexChange(event) {
    alert(event.detail.value);
}

You should call the apex method as a function. It returns a promise which you can handle using then.catch methods.

What you implemented below:

get apexOptions() {
    return [
        apexclass.forEach(element => {
            label: this.apexclass.data.Name, value:this.apexclass.data.name

        });
    ]
}

This is getter method (I dont understand what exactly you implemented in it - apexclass is not defined). To put it in simple words this is equivalent to formulas in Aura - {!v.firstName+' '+v.lastName}. The same in LWC will be:

get name() {
   return this.firstName + ' ' + this.lastName;
}

Note: I used apex imperatively. However you can use wired property or function.