1

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:

enter image description here

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 fields for all the columns. Please suggest any workaround for the same.

Improve this question
  • you can use a class which is specific to each column and use a queryselector to fetch the array of items. this seems to be a purely JS question which would probably best be asked on stackoverflow imo. – glls Nov 2 '19 at 20:11
  • Where are you intending to insert the values coming from the table in Salesforce? In an object? – Carlos Naranjo Nov 3 '19 at 1:08
  • @glls thank you, for responding, I will post the same on stackoverflow and could you please give me an example of queryselector? – gs650x Nov 3 '19 at 3:14
  • @CarlosNaranjo thank you for responding, I intend to insert the data in a Salesforce object – gs650x Nov 3 '19 at 3:16
  • @gs650x I see a lot of cells there. Do you track one value for row or all cells peer row? For example; the row v1 contains 11 cells, v2 another 11 cells and so on. Are you intending to track each value for each cell on each row in a field in that SFDC Object? – Carlos Naranjo Nov 3 '19 at 3:32