Lightning combobox not showing values

Question

Below is my code I have combobox values in my activityOptions but my combobox does not displays anything. Please help me with this issue.

.js

// Complete activity
    for (let v of this.activity) {
        this.complete_activity.push(v.option);
        this.dropDown["Complete Activity?"] = this.complete_activity;
        
       // console.log('this.complete_activity : '+this.complete_activity);
    }
    this.activityOptions = [{label : this.complete_activity, value : this.complete_activity}];
        console.log('this.activityOptions : '+JSON.stringify(this.activityOptions));

.html

<template>
    <lightning-card>
        Hello
        <lightning-combobox name="SelectOption" label="Complete Activity?" 
        options={activityOptions} 
           required>
        </lightning-combobox>
    </lightning-card>
</template>

Answer 1

As stated in the documentation:

In your JavaScript, define an array of options. Each option corresponds to a list item on the dropdown list. Define the content of each option by specifying a value property and a label property. The label value is displayed for the item in the rendered dropdown list, while the value property's value is stored when the item is selected.

So activityOptions must be an array of object with two string properties: label and value.

[
    { label: 'Not Started Yet', value: 'Not Started Yet' },
    { label: 'Started', value: 'Started' },
    { label: 'Complete', value: 'Complete' }
]

Instead, as shown by the console.log, you created and array with a single element whose label and value properties are arrays:

[
    {
        label: [ 'Not Started Yet', 'Started', 'Complete' ],
        value: [ 'Not Started Yet', 'Started', 'Complete' ]
    }
]

In order to fix it, you should modify your for-loop:

// Complete activity
const comboboxOptions = [];
for (const v of this.activity) {
    this.complete_activity.push(v.option);
    this.dropDown["Complete Activity?"] = this.complete_activity;
    
   // console.log('this.complete_activity : '+this.complete_activity);
   
   comboboxOptions.push({ label: v.option, value: v.option });
}
this.activityOptions = comboboxOptions;
console.log('this.activityOptions: ', this.activityOptions);

Please note that special characters must be escaped. I.E. if you want to display "Hello World" the label should be label: '\"Hello World\"'.

Answer 2

@Indresh, please elaborate a bit more what is your expected output as it is difficult to comprehend with just this line not displays anything.

Also you may want to compare your code against the below LWC and see what you are missing https://developer.salesforce.com/docs/component-library/bundle/lightning-combobox/example