How do I populate a lightning-combobox with options from an Apex controller?

I have the following, but the combox doesn't show any options. I can see the alert popup with the option Name it's just not diplaying in the combobox.

HTML

<template>
    <lightning-combobox
        name="recentReports"
        label="Report"
        placeholder="Select Report"
        value={value}
        options={reportOptions}
        onchange={handleRecentReportsChange} >
    </lightning-combobox>
</template>

JS

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

export default class ReportLink extends LightningElement {
    @track reportOptions = [];
    @track value = '';
    
    connectedCallback() {
        getRecentReports()
            .then(result => {
                for (var i = 0; i < result.length; i++) {
                    this.reportOptions.push({label: result[i].Name, value: result[i].Id});
                    alert(result[i].Name);
                }
            })
            .catch(error => {
                alert(JSON.stringify(error));
            });
    }

    handleRecentReportsChange(){

    }

}

Apex

public with sharing class ReportController {
    public ReportController() {

    }

    @AuraEnabled(Cacheable=true)
    public static List<RecentlyViewed> getRecentReports(){
        return [SELECT Id, Name FROM RecentlyViewed WHERE Type = 'Report'];
    }

}

 

I've got the following Apex method
 

@AuraEnabled(Cacheable=true)
    public static List<Group> getPublicGroups(String name){
        String wildcardName = '%' + name + '%';
        return [SELECT Id, Name FROM Group WHERE Name LIKE :wildcardName];
    }

And I've got the following JS:
 

handleSearchGroupSearch(event) {
        getPublicGroups({name: this.template.querySelector('[data-id="searchName"]').value}).then(result => {
            for (let key in result) {
                alert(key.Name);
            }
        })
        .catch(error => {
            this.error = error;
        });
    }

The query returns one record: [{"Name":"Test Group","DeveloperName":"Test_Group","Id":"00G5w000005fBXREA4"}]

But my alert shows 'undefined'.  Any ideas what I'm doing wrong?

I'm using a wired function to pull rows from a custom object, but I'm not sure how to edit the response.  This is what I have now:
 

@wire(searchSmartTasks, { smartTaskName: '$smartTaskName',  calendarValue: '$calendarValue',})
    searchSmartTasks({ error, data }) {
        if (data) {
            for(let i = 0; i < this.data.length; i++) {
                this.data[i].classStatus = 'green';
            }

        } else if (error) {
            this.error = error;
            console.log(error);
        }
    }

My SmarTask object doesn't have a field named classStatus, so I'm trying to append it to the response, so I can access it in my view like this:
 

<ul>
		<template for:each={smartTasks} for:item="smartTask">
			<li key={smartTask.Id}>
				{smartTask.classStatus}
			</li>
		</template>
	</ul>

The above doesn't work.  Any ideas?

From looking over a few sources online it seems the returned data is not editable and the suggestion was to clone the data by doing something like this:
 

// ADDED THIS LINE
@track smartTasks = [];

@wire(searchSmartTasks, { smartTaskName: '$smartTaskName',  calendarValue: '$calendarValue',})
    searchSmartTasks({ error, data }) {
        if (data) {
           
           // ADDED THIS LINE
           this.smartTasks = {...data};
           
           for(let i = 0; i < this.smartTasks.length; i++) {
                this.smartTasks[i].classStatus = 'green';
            }

        } else if (error) {
            this.error = error;
            console.log(error);
        }
    }

This unfortunately gives me the following error when the searchSmartTasks function is called:

[Assert Violation: Invalid template iteration for value `[object Object]` in [object:vm undefined (46)]. It must be an array-like object and not `null` nor `undefined`.]

I've got the following Apex method
 

@AuraEnabled(Cacheable=true)
    public static List<Group> getPublicGroups(String name){
        String wildcardName = '%' + name + '%';
        return [SELECT Id, Name FROM Group WHERE Name LIKE :wildcardName];
    }

And I've got the following JS:
 

handleSearchGroupSearch(event) {
        getPublicGroups({name: this.template.querySelector('[data-id="searchName"]').value}).then(result => {
            for (let key in result) {
                alert(key.Name);
            }
        })
        .catch(error => {
            this.error = error;
        });
    }

The query returns one record: [{"Name":"Test Group","DeveloperName":"Test_Group","Id":"00G5w000005fBXREA4"}]

But my alert shows 'undefined'.  Any ideas what I'm doing wrong?

I'm using a wired function to pull rows from a custom object, but I'm not sure how to edit the response.  This is what I have now:
 

@wire(searchSmartTasks, { smartTaskName: '$smartTaskName',  calendarValue: '$calendarValue',})
    searchSmartTasks({ error, data }) {
        if (data) {
            for(let i = 0; i < this.data.length; i++) {
                this.data[i].classStatus = 'green';
            }

        } else if (error) {
            this.error = error;
            console.log(error);
        }
    }

My SmarTask object doesn't have a field named classStatus, so I'm trying to append it to the response, so I can access it in my view like this:
 

<ul>
		<template for:each={smartTasks} for:item="smartTask">
			<li key={smartTask.Id}>
				{smartTask.classStatus}
			</li>
		</template>
	</ul>

The above doesn't work.  Any ideas?

From looking over a few sources online it seems the returned data is not editable and the suggestion was to clone the data by doing something like this:
 

// ADDED THIS LINE
@track smartTasks = [];

@wire(searchSmartTasks, { smartTaskName: '$smartTaskName',  calendarValue: '$calendarValue',})
    searchSmartTasks({ error, data }) {
        if (data) {
           
           // ADDED THIS LINE
           this.smartTasks = {...data};
           
           for(let i = 0; i < this.smartTasks.length; i++) {
                this.smartTasks[i].classStatus = 'green';
            }

        } else if (error) {
            this.error = error;
            console.log(error);
        }
    }

This unfortunately gives me the following error when the searchSmartTasks function is called:

[Assert Violation: Invalid template iteration for value `[object Object]` in [object:vm undefined (46)]. It must be an array-like object and not `null` nor `undefined`.]