I am doing LWC Superbadge challenge 4 and I am unable to show values in combobox. The page just displays blank.
My code
HTML – I printed searchoptions in a paragraph tag and it displayed on the page like
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
<template>
<lightning-card>
<lightning-layout horizontal-align="center" vertical-align="end">
<lightning-layout-item class="slds-align-middle" padding="horizontal-medium">
<p>{searchOptions}</p>
<lightning-combobox variant="label-hidden"
label="Boat Type"
value={selectedBoatTypeId}
options={searchOptions}
onchange={handleSearchOptionChange} class="slds-align-middle">
</lightning-combobox>
</lightning-layout-item>
</lightning-layout>
</lightning-card>
</template>
JS
import { LightningElement,track,wire } from 'lwc';
import getBoatTypes from '@salesforce/apex/BoatDataService.getBoatTypes';
export default class BoatSearchForm extends LightningElement {
@track selectedBoatTypeId = '';
value='';
// Private
error = undefined;
// Needs explicit track due to nested data
@track searchOptions;
label;
// Wire a custom Apex method
@wire(getBoatTypes)
boatTypes({ error, data }) {
if (data) {
console.log(data);
this.searchOptions = data.map(type => {
return{
label:type.name,
value:type.id
};
});
this.searchOptions.unshift({ label: 'All Types', value: '' });
} else if (error) {
this.searchOptions = undefined;
this.error = error;
}
}
// Fires event that the search option has changed.
// passes boatTypeId (value of this.selectedBoatTypeId) in the detail
handleSearchOptionChange(event) {
event.preventDefault();
this.selectedBoatTypeId = event.detail.value;
// Create the const searchEvent
const searchEvent = new CustomEvent('search', {
detail: { boatTypeId: this.selectedBoatTypeId }
});
// searchEvent must be the new custom event search
searchEvent;
this.dispatchEvent(searchEvent);
}
}
Best Answer
After 24 hours of getting stuck in this step I realised that in the JS Code I have passed the values in map as
Turns out I missed the case sensitivity on Name and Id
This resolved the issue.