JavaScript – How to Reduce Array and Add Related Integers in LWC

arrayjslightning-web-components

i have this array

const input = [
  { StockKeepingUnit: 'SKU-001', Quantity: 3 },
  { StockKeepingUnit: 'SU-002', Quantity: 5 },
  { StockKeepingUnit: 'SU-002', Quantity: 7 },
  { StockKeepingUnit: 'SKU-d7', Quantity: 2 },
  { StockKeepingUnit: 'SKU-d7', Quantity: 4 },
  { StockKeepingUnit: 'sku-899', Quantity: 1 },
  { StockKeepingUnit: 'SU-002', Quantity: 1 },
  { StockKeepingUnit: 'SU-002', Quantity: 2 },
];

but I would like for it to be like this

const input = [
  { StockKeepingUnit: 'SKU-001', Quantity: 3 },
  { StockKeepingUnit: 'SU-002', Quantity: 15 },
  { StockKeepingUnit: 'SKU-d7', Quantity: 6 },
  { StockKeepingUnit: 'sku-899', Quantity: 1 },
];

So reduce the array but add the quantities together, please, this is driving me crazy. Thank you!

Best Answer

I think that the best approach would be first doing all the sums, and the formatting as you like

Object.entries(
   input
      .reduce(
         (prev, current) => ({...prev, [current.StockKeepingUnit]: (prev[current.StockKeepingUnit] || 0) + current.Quantity}),
         {}
      )
).map(([StockKeepingUnit, Quantity]) => ({StockKeepingUnit, Quantity}))

For your second question, it would be very similar to the first answer, but instead of adding the values, you should add them to lists, and then reduce the items again in order to calculate the average

Object.entries(
   input
      .reduce(
         (prev, current) => ({...prev, [current.StockKeepingUnit]: [...(prev[current.StockKeepingUnit] || []), current.Quantity]}),
         {}
      )
)
    .map(([StockKeepingUnit, Quantity]) => ({StockKeepingUnit, Average: Quantity.reduce((a, b) => a + b, 0) / Quantity.length}))

Why your code does not work?

To be able to update the field dynamically from the list of inputs, you need to pass the index of the array and the field to be updated to the onchange function. You need to write a generic method to update values. Make these changes to the input fields. Both of these you can pass from HTML as data attributes.

HTML code

<template for:each={selectedOlis} for:item="oli" for:index="index">
    <div key={oli.Id}>
        {oli.Name} &nbsp; {index}
        <lightning-input data-index={index} data-field-api-name="Quantity" label="Quantity" type="Number" value={oli.Quantity}
            placeholder="Quantity" onchange={handleListInputChange}>
        </lightning-input>
        <div onclick={addRecord}>
            <lightning-icon icon-name="utility:add" size="small"></lightning-icon>
        </div>
    </div>

JS function

handleTableInputChange(event) {
    // clone the array
    let newArray = [...this.selectedOlis];

    // get the row to be updated and update the field value
    let updatedRow = {...newArray[event.target.dataset.index], [event.target.dataset.fieldApiName]: event.detail.value};

    // replace the updated item in the array.
    newArray[event.target.dataset.index] = updatedRow;

    // update the actual array property
    this.selectedOlis = newArray;
}

Please note that you can use the same function for all of the inputs and it will work fine. You just need to make sure that you put the correct data-field-api-name and data-index in the HTML markup. Let me know if you face any problem!

Best Answer

Related Solutions

[SalesForce] LWC create input fields under LWC iteration

Why your code does not work?

Related Topic