Using Wired Property in LWC

Question

I have defined an Apex Controller

public inherited sharing class ListCont {

@AuraEnabled(cacheable=true)
public static List<Map<String, String>> getOptions(String sobjectName, String fieldName) {
    return new List<Map<String, String>>{new Map<String,String>{'value'=>'x','label'=>'x x'}};
} 
}

and LWC Html file

<template>
    <template for:each={options} for:item="o">
        <li key={o.value}>
            {o.value}, {o.label}
        </li>
    </template>
</template>

and Javascript module

import { LightningElement, wire } from 'lwc';
import getOptions from '@salesforce/apex/ListCont.getOptions';
export default class List extends LightningElement {
@wire(getOptions, {sobjectName:'Account', fieldName:'AccountSource'})
options/* = [
    { label: 'Y Y y', value: 'yyy' }
]*/;

and it doesn't work, with Lightning Debug Mode enabled, it generates error

afterRender threw an error in 'c:list' [Assert Violation: Invalid template iteration for value [object Object] in [object:vm undefined (45)], it requires an array-like object, not null or undefined.] []1

Without Lightning Debug Mode, it generates error

afterRender threw an error in 'c:list' [e[ki] is not a function]

Answer 1

For wired property usage, .data property of returned result should be used.

Also, it is good practice to surround code which displays these data with <template if:true={options.data}> tag to avoid displaying anything if data is not set.

So final working code looks like following

<template if:true={options.data}>
    <template for:each={options.data} for:item="o">
        <li key={o.value}>
            {o.value}, {o.label}
        </li>
    </template>
</template>