0

I am having trouble getting a flow of operations going properly with my LWC.

My issue is when a popup is created when a user clicks an edit button on a table cell, it grabs available selections for that column. There is only one column that needs to hit apex.

connectedCallback(){
    let selectableOptions = [];

    if(this.column.fieldName === 'operator'){
        selectableOptions = getOperators(this.data.DataType);
    } else if(this.column.fieldName === 'fieldName'){
        //not done yet
    } else if(this.column.fieldName === 'fieldValue'){
        //not done yet
    } else if(this.column.fieldName === 'objectName'){
        getStarterObjects({objectName: 'contract'})
            .then(result => {
                this.allItems = JSON.parse(result);
                this.tableLoaded = true;
            }).catch(error => {
                console.log(JSON.stringify(error));
                //Post error in toast.
            });
    }

    return selectableOptions;
}

get filteredItems(){
    let filteredItemsBySearchTerm = this.allItems;
    if(this.searchTerm.length >= 3){
        filteredItemsBySearchTerm = this.allItems.filter(item => item.label.includes(this.searchTerm) || item.secondaryLabel.includes(this.searchTerm));
    } 

    if(filteredItemsBySearchTerm.length > 0){
        filteredItemsBySearchTerm = filteredItemsBySearchTerm.map(item => ({
            ...item,
            itemClassName: `slds-item tile-item ${item.apiName === this.selectedItemApiName ? 'selected-tile' : ''}`
        }));
    }
    console.log(JSON.stringify(filteredItemsBySearchTerm));
    return filteredItemsBySearchTerm;
}

And my HTML:

<ul id="availableItemList" class="slds-has-dividers_around-space object-list">
                        <template for:each={filteredItems} for:item="item">
                            <li key={item.apiName} onclick={itemSelect} data-api-name={item.apiName} class={item.itemClassName}>
                                <lightning-tile label={item.label} class="slds-tile_board">
                                    <lightning-layout>
                                        <lightning-layout-item>
                                            <p>{item.secondaryLabel}</p>
                                        </lightning-layout-item>
                                    </lightning-layout>
                                </lightning-tile>
                            </li> 
                        </template>
                    </ul>

So I am looping over filteredItems. I am having a hard time figuring out how I set allItems, then update filtered items and have it rerender with all my items that came back from an asynchronous call to Apex. The code above causes a template loop through an empty list first, which seems to throw the following error in lwc_engine.js: TypeError: e[ki] is not a function.

So my main question is: How can I call into Apex, get my data, then come back and update one list of every item -> trigger a change on filteredItems, then rerender my list with the template loop when the apex call is asynchronous and initially the list is empty and causes a crash.

  • So, I played around a bit, I can't seem to replicate the error. Maybe something else is doing it? Would it be possible for you to create a sscce that actively demonstrates the problem? – sfdcfox Mar 21 at 23:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.