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]

Patlatus · Accepted Answer · 2019-03-19 11:33:48Z

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>

answered Mar 19, 2019 at 11:33

Patlatus

18.9k14 gold badges89 silver badges207 bronze badges

Could you please accept this answer to close the question?

Adrian Larson
– Adrian Larson ♦

2020-02-17 20:11:42 +00:00
Commented Feb 17, 2020 at 20:11
yes, sure. Done.

Patlatus
– Patlatus

2020-02-18 16:25:28 +00:00
Commented Feb 18, 2020 at 16:25

Add a comment |

Stack Exchange Network

Using Wired Property in LWC

1 Answer 1

You must log in to answer this question.

Hot Network Questions

Using Wired Property in LWC

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions