2

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.] [enter image description here]1

Without Lightning Debug Mode, it generates error

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

enter image description here

1 Answer 1

4

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>

enter image description here

2
  • Could you please accept this answer to close the question?
    – Adrian Larson
    Feb 17, 2020 at 20:11
  • yes, sure. Done.
    – Patlatus
    Feb 18, 2020 at 16:25

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .