0

I have an iterative table contains input field onchange event i need to sum up the value of the iterative input box ?

  <table aria-describedby="conatact-list" class="slds-table slds-table_cell-buffer slds-table_bordered ">
                <!--Header of the table-->
                <thead>
                    <tr class="slds-line-height_reset">
                        
                        <th class="" scope="col">
                            <div class="slds-truncate" title="Prdt">Prdt</div>
                        </th>
                        <th class="" scope="col">
                            <div class="slds-truncate" title="Quantity">Quantity</div>
                        </th>
                        
                       
                    </tr>
                </thead>

                <!--Body of the table-->
                <tbody>
                    <template for:each={PrdtList} for:item="item" for:index="indexVar">
                        <tr key={item.recId} class="slds-hint-parent">
                           
                           
                             <td class="slds-truncate">
                                <div>
                                    {item.ProdName}
                                </div>
                            </td> 
                            
                            <td class="slds-truncate">
                                <div>
                                    <input type="number"  data-index={indexVar}  data-target-id={item.Qty}  onchange={handleQtyChange}></input>
                       
                                </div>
                            </td> 
                            
                          
                        </tr>
                    </template>
                    
                </tbody>
            </table>

handleQtyChange(event)
  {
    const value = event.target.value;
   
   
      const TotalList = JSON.parse(JSON.stringify(this.PrdtList))
     
        this.totalVal=TotalList.reduce(function(accum, val) {
                        console.log('accum',accum)
                        return accum + Number(value)}, 0);
                    
  }

If suppose in the list contains two input fields then those two input fields needs to be added and store in totalVal.My approach is not working? what i have done wrong ? Please guide me.

Expected result: if 1st input value in the list if i enter is 6 and 2nd input value in the list i enter 4 then totalVal become 6+4=10.

1 Answer 1

1

You have a small mistake in your markup:

<div>
    <input type="number"  data-id={item.recId} value={item.Qty}  onchange={handleQtyChange}></input>
</div>

Now, having the record Id, you can:

  handleQtyChange(event) {
    this.PrdtList.find(
      (record) => record.recId === event.target.dataset.id)
      .Qty = parseFloat(event.target.value)
    this.totalVal = this.PrdtList.reduce((p,v) => p + v.Qty, 0)
  }

Demo.

1
  • @Thanks sfdcfox but what if we have some default value for Qty @track PrdtList = [ { recId: '1', ProdName: 'Widgets', Qty: 10 }, { recId: '2', ProdName: 'Gadgets', Qty: 20 }, { recId: '3', ProdName: 'FizzBangs', Qty: 30 } ] then total initial value is 60 ? how to satsify that ?
    – New learn
    Feb 19, 2022 at 20:48

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .