LWC: CallBack list doesn't show on lightning-layout

Question

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>
        <lightning-layout-item flexibility="auto" padding="around-small">
            <lightning-input
                type="search" label=""
                name="search-key"
                placeholder="Input Name for Search"
                onchange={handleSearchKeyChanged} 
                value={searchKey}>
            </lightning-input>
        </lightning-layout-item>
    </lightning-layout>

    <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>
                </lightning-layout-item>
            </template>
        </lightning-layout>
    </div>

and here is JS;

searchKey = '';
searchedResult = {};

handleSearchKeyChanged(e) {
    window.clearTimeout(this.delayTimeout);
    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

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 {};