LWC Combobox not showing the dropdown list [wiring apex method]

apexlightning-web-components

I'm building a lwc combobox with calling Apex method.　What I want to do is to show all field labels of Account in a dropdown list. I confirmed the lwc receives the value from Apex method but my lwc doesn't show anything if I clicked the button as follows:
enter image description here

Here's my JS code:

import { LightningElement,track, wire } from 'lwc';
import retrieveFields from '@salesforce/apex/RetrieveShinseiFields.retrieveFields';

export default class DisplayShinseiFields extends LightningElement {
    @track fieldsInfo=[];
    @track obj;
    value;

    @wire(retrieveFields) 
    wiredLabels({error, data}){
        if(data){
            for(var key in data){
                this.obj={label:key, value:data[key]};
                this.fieldsInfo.push(this.obj);
            }
        }
        if(error){
            this.error=error;
        }
    }
    
    handleChange(event) {
        this.value = event.detail.value;
    }
}

And the Apex class:

public with sharing class RetrieveShinseiFields {
@AuraEnabled(cacheable=true)
public static Map<String,String> retrieveFields(){
    Map<String, SObjectField> fields = Account.getSObjectType().getDescribe().fields.getMap();
    Map<String, String> fInfo = new Map<String, String>();
    for(SObjectField f : fields.values()) {
        string fLabel  = f.getDescribe().getLabel();
        string fName  = f.getDescribe().getName();
        fInfo.put(fLabel, fName);
        
    }
    System.debug(finfo);
    return fInfo;
    }
}

My html

<template>
<template if:true={fieldsInfo}>
<lightning-combobox
        name="fieldInfo"
        label="field label"
        value={value}
        placeholder="Select field label"
        options={fieldsInfo}
        onchange={handleChange} >
</lightning-combobox>
</template>

What I tried:

I've already read these article:

  1. LWC -lightning-combobox not showing dropdown list
  2. Lightning combobox not showing values

I've checked the "fieldsInfo" has the value using for:each in html as follows.
enter image description here

I've stuck here for more than 5hours. Can anybody save my life, please?

Best Answer

HTML CODE:

<template>
<template if:true={loaded}>
<lightning-combobox
        name="fieldInfo"
        label="field label"
        value={value}
        placeholder="Select field label"
        options={fieldsInfo}
        onchange={handleChange} >
</lightning-combobox>
</template></template>

JS Code:

import { LightningElement,track, wire } from 'lwc';
import retrieveFields from 
 '@salesforce/apex/RetrieveShinseiFields.retrieveFields';
import SystemModstamp from '@salesforce/schema/Account.SystemModstamp';

export default class DisplayShinseiFields extends LightningElement {
    @track fieldsInfo=[];
    @track obj;
    value;
    loaded = false
    @wire(retrieveFields) 
    wiredLabels({error, data}){
        if(data){
            console.log('data '+JSON.stringify(data))
            for(var key in data){
           
            
            console.log('this.obj '+JSON.stringify({label:key, value:data[key]}))
            this.fieldsInfo.push({label:key, value:data[key]});
        }
        this.loaded = true;
    }
    if(error){
        this.error=error;
    }
}

handleChange(event) {
    this.value = event.detail.value;
}
}

The fieldsInfo array needs to be updated before being rendered.

hope this helps

Related Topic