I want to make a LWC which input keywords and show the results on list using lightning-layout & lightning-layout-item. And I want to make it that doesn't depend on SObjects.

Now, I have a problem the list. it inputs any keywords doesn't show anything. html is below;

        <lightning-layout-item flexibility="auto" padding="around-small">
                type="search" label=""
                placeholder="Input Name for Search"

    <div class="slds-m-around_small">
        <lightning-layout multiple-rows="true" draggable="true">
            <template if:true={searchResult} for:each={searchResult} for:item="row" key={row.id}>
                <lightning-layout-item key={row.id}>
                    <span>{row.name}, {row.detail}, {row.lastUpdate}</span>

and here is JS;

searchKey = '';
searchedResult = {};

handleSearchKeyChanged(e) {
    const searchKey = e.target.value;
    this.delayTimeout = setTimeout(() => {
        this.searchKey = searchKey;
    }, DELAY);

@wire(getSearchedList, {searchKey: '$searchKey', selectSObj: '$selectedSObj'})
getSearchedListResult({error, data}) {
    if (data) {
        this.searchedResult = JSON.parse(data);
        console.log('>>> searchResult: ', this.searchedResult);
    } else if (error) {
        this.error = error;

console.log in getSearchedListResult, it shows data. It worked when I use lightning-datatable, but it can't use for my reason.

I think it's similler question is here but it looks unresolved: Lightning Web Component - passing object between component

1 Answer 1


In your markup, you use searchResult, but in your JS, you use searchedResult. This is likely what's causing your problem.

Also, your searchResult should be an array, not an object:

searchResult = []; // not {};
  • Thank you @sfdcfox ! I didn't find this typo... Now, it works!
    – Asae
    Commented Sep 25, 2020 at 1:56

You must log in to answer this question.

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