Lightning input not able to render inside iteration

aura-iterationjavascriptlightning-web-components

I am trying to iterate a custom metadata to create input fields in the lightning layout item, however it is not rendering as expected, not sure what I am doing wrong.

Here is my code:

    <!-- START: Normal Search -->
<lightning-layout multiple-rows>
    <template for:each={filter} for:item="filterFields">
        <lightning-layout-item key={filter.Id} size="12" padding="around-small" small-device-size="12" medium-device-size="6"
            large-device-size="3">
            <lightning-input type="text" variant="standard" name="pid" label="PID:" placeholder="type PID here...">
            </lightning-input>
        </lightning-layout-item>
    </template>
</lightning-layout>
<!-- END: Normal Search -->

Below is the log I am getting in console.

Inside Connected Callback

batConsumerSearch.js:4 this.filterFields--->[{"Id":"m0D74000000GmbREAS","Filter_Label__c":"First Name","Filter_Section__c":"Basic","Filter_Type__c":"text"},{"Id":"m0D74000000GmbWEAS","Filter_Label__c":"Last Name","Filter_Section__c":"Basic","Filter_Type__c":"text"},{"Id":"m0D74000000GmbMEAS","Filter_Label__c":"PID","Filter_Section__c":"Basic","Filter_Type__c":"text"},{"Id":"m0D74000000GmbbEAC","Filter_Label__c":"Country","Filter_Section__c":"Basic","Filter_Type__c":"text","Default_Value__c":"US"}]

Best Answer

The above answer almost has it. You need to switch your for:each and for:item:

<lightning-layout multiple-rows>
    <template for:each={filterFields} for:item="filter">
        <lightning-layout-item key={filter.Id} size="12" padding="around-small" small-device-size="12" medium-device-size="6"
            large-device-size="3">
            <lightning-input type="text" variant="standard" name="pid" label="PID:" placeholder="type PID here...">
            </lightning-input>
        </lightning-layout-item>
    </template>
</lightning-layout>
Related Topic