template querySelectorAll -- not able to access values

Question

I am trying to dynamically generate an input form and I need to create a JSON based on the values and nodes created in the input form.

I tried to add a class selector with querySelectorAll it returns the element, however, I am not able to access its values and data attributes.

Here is my code --

        <!-- START: Normal Search -->
    <lightning-layout multiple-rows>
        <template for:each={filterFields} for:item="filter">
            <lightning-layout-item class="userInput" key={filter.Id} size="12" padding="around-small" small-device-size="12"
                medium-device-size="6" large-device-size="3">
                <lightning-input data-id={filter.Id} data-json={filter.Json_Node__c} type={filter.Filter_Type__c}
                    variant="standard" name={filter.Filter_Label__c} label={filter.Filter_Label__c}
                    value={filter.Default_Value__c} onblur={handleBlur}>
                </lightning-input>
            </lightning-layout-item>
        </template>
    </lightning-layout>
    <!-- END: Normal Search -->

    searchConsumers(){
    console.log('Inside searchConsumers');
    const userInputs = this.template.querySelectorAll(".userInput");
      userInputs.forEach( input => {
        console.log('MVK element input-->'+input);
        console.log('MVK element value input-->'+input.value);
        console.log('MVK element json input-->'+input.dataset.json);
    });
}

Console Logs --->

MVK element input-->SecureElement: [object HTMLElement]{ key: {"namespace":"c"} }
MVK element value input-->undefined
MVK element json input-->undefined

Answer 1

this.template.querySelectorAll(".userInput") queries all elements from the DOM which has the following attribute value class="userInput". From your posted code, this is the lightning-layout-item inside the iteration. This is not input.

That is why your console says, that there is some component MVK element input-->SecureElement: [object HTMLElement]{ key: {"namespace":"c"} }, but no value, or dataset.json

So you are incorrectly trying to get input values by the user. You need to query lightning-input by some selector (for example, data-type="user-input"):

HTML

....
<lightning-input
    data-type="user-input"
    data-id={filter.Id}
    data-json={filter.Json_Node__c}
    type={filter.Filter_Type__c}
    variant="standard"
    name={filter.Filter_Label__c}
    label={filter.Filter_Label__c}
    value={filter.Default_Value__c}
    onblur={handleBlur}>
</lightning-input>
....

JS

....
    searchConsumers(){
        console.log('Inside searchConsumers');
        const userInputs = this.template.querySelectorAll('[data-type="user-input"]');
        userInputs.forEach( input => {
            console.log('MVK element input-->'+input);
            console.log('MVK element value input-->'+input.value);
            console.log('MVK element json input-->'+input.dataset.json);
        });
....