how to fetch array of input values from html to JS

80
November 03, 2019, at 1:50 PM

I have posted the same question on salesforce.stackexchange.com below is the link

https://salesforce.stackexchange.com/questions/283596/how-to-fetch-input-field-value-in-js-in-lwc?noredirect=1#comment426016_283596

But in the comments people suggested this is not much related to salesforce it is more of a Javascript thing so I am posting the same here, please take a look and suggest from html and js point of view.

HTML syntax seem different as it is lightning web component of salesoforce not angular, and also please help me to understand the same behavior in angular and I will do it in salesforce accordingly

in the below html code I am iterating 2 lists linItemData(11 records) and studyData(20 records)

<table class="slds-table slds-table_cell-buffer slds-table_bordered">
          <thead>
            <tr class="slds-line-height_reset">
              <template if:true={studyData}>
                <template for:each={studyData} for:item="sData">
                  <th key={sData}>
                    <div class="tablename slds-p-bottom_medium"></div>{sData.Visit_Name__c}
                  </th>
                </template>
              </template>
            </tr>
          </thead>
          <tbody>
            <template if:true={lineItemData}>
              <template for:each={lineItemData} for:item="sLineItem">
                <tr key={sLineItem}>
                  <template for:each={studyData} for:item="sData">
                    <td key={sData.Id}>
                      <lightning-input variant="label-hidden" class="fieldSize" type="number" step="0.01"
                        label="visitValue" data-key={sData.Id} onchange={visitValueChange} placeholder="00.00">
                      </lightning-input>
                    </td>
                  </template>
                </tr>
              </template>
            </template>
          </tbody>
        </table>

and I am getting an expected result with all the required input fields on the UI like below:

now I need to fetch the input value for all v20s for example for v1 (first column name)should have array of 11 input records.

JS is as below:

visitValueChange(event) {
    this.studyData
        .find(item => item.Id === event.currentTarget.dataset.key)
        .visitValue = event.target.value;
}

I have tried everything I could but the visitValue can hold only the 1 recent value for example if I add 1 on first input field, two on 2nd, three on 3rd and so on after that I hit a button which is calling a JS function to see the studyData array but it has only the recent value which is 3 not all 1,2 and 3 values entered and the requirement is to have an array of all the input values added on all the 11 input fileds for all the columns. Please help me to suggest any workaround for the same.

READ ALSO
How to use NodeJS processes correctly for spawning multiple tensorflow detection processes?

How to use NodeJS processes correctly for spawning multiple tensorflow detection processes?

I have a NodeJS server where users can upload an image to test a tensorflow detection modelWhen a second user uploads an image while the TF process for the first image is still running, the first does not create the

87
Local IP and external IP setup for React

Local IP and external IP setup for React

I am connecting to Node on ReactEvery time I am outside of my home server, I need to change the local IP config to the external IP config

90
Why aren&#39;t the values inserted into the mysql2 query?

Why aren't the values inserted into the mysql2 query?

Can you tell me, please? Why does the mysql2 value substitution not work inside the IN operator?

87
PHP json_decode does not work with single unpaired surrogate caused by Node 12 well-formed JSON.stringify

PHP json_decode does not work with single unpaired surrogate caused by Node 12 well-formed JSON.stringify

Node 12 now uses Well-formed JSONstringify which outputs escape sequences for lone surrogates

60