[SalesForce] LWC : Unable to see values in combobox

I am doing LWC Superbadge challenge 4 and I am unable to show values in combobox. The page just displays blank.Output image of combobox

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

return{
        label:type.name, \\Should be type.Name
        value:type.id      \\Should be type.Id
      };

Turns out I missed the case sensitivity on Name and Id

return{
        label:type.Name,
        value:type.Id     
      };

This resolved the issue.

Related Topic