0

i fetch this records from DB : enter image description here

HTML :

<template for:each={createDefaultsData} for:item="acc" for:index="index">
    <tr key={acc.key} id={acc.key}>
        <td>{index}</td>

        <td>
            <lightning-combobox
                data-index={index}
                data-id={indx}
                name="input1"
                label="Field"
                placeholder="Sélectionner un champ"
                value={acc.Field__c}
                onchange={handleChangeCaseFields}
                options={Options}
            >
            </lightning-combobox>
        </td>
        <td>
            <lightning-input-field
                data-index={index}
                data-id={indx}
                field-name="Operator__c"
                value={acc.Operator__c}
                name="input2"
                onchange={handleChange2}
            ></lightning-input-field>
        </td>
        <td>
            <input-text
                onsearchstringvaluechange={handlesearchStringvaluechange}
                search-string={input4}
                data-index={index}
                data-id={indx}
                label="Custom Lookup - Account"
                selected-name={acc.Value__c}
                recordlimit="10"
                onlookupselect={handlelookupselectaccount}
            ></input-text>
        </td>
        <td><button class="slds-button slds-button_neutral" onclick={handleRowRemoveClick}>Remove</button></td>
    </tr>
</template>

Js :

handleChange2(event) {
    this.input2 = event.target.value;
}

handleChangeCaseFields(event) {
    this.input1 = event.target.value
}
  • Record 1 : **Field** : Status , **Operator** = Equals , **Value** = Clos
  • Record 2 : **Field** : CaseNumber , **Operator** = Equals , **Value** = 01474743

I want to build an array of changed values , let's say for Record 1 we have changed it's field to Subject and for record 2 we have changed the operator to not Equal - i don't insert value in database i just want to build an array with existing values and values which has been changed so in our case it will be :

  • Record 1 : Field : Subject, Operator = Equals , Value = Clos
  • Record 2 : Field : CaseNumber , Operator = Not Equals , Value = 01474743

How can i achieve this? how to iterate over table then stock changed values per TD ?

2
  • What's not working with your current design? Where exactly are you stuck? This site is here to help with specific problems, but it's not clear specifically what you're having trouble with.
    – Nick C
    Commented Sep 8, 2022 at 1:57
  • i've mentioned what is my problem , is how to get changed values from array
    – user110654
    Commented Sep 8, 2022 at 7:04

1 Answer 1

0

You're trying to set all of the row values into a single variable:

handleChange2(event) {
    this.input2 = event.target.value;
}

As I previously demonstrated, you need to store the new values into an array:

this.filters[index][name] = value;

If you want to know what the differences are, you need to define an initial set of values when you get data from your wire method:

@wire(getCriterias, { listview: '$listViewId' })
handleGetFilters(response) {
  const { data } = response;
  this.filters = data.map((filter, index)=>({...filter, index}));
  this.originalValues = data;
}

When you want to save the "delta" changes, you can find those:

const modifiedFilters = this.filters
  .filter(
    (
      filter,
      index // Find rows with at least one edit
    ) =>
      Object.entries(filter).some(
        ([field, value]) => this.originalValues[index][field] !== value
      )
  )
  .map((filter, index) => ({
    Id: filter.Id,
    ...Object.fromEntries(
      Object.entries(filter).filter(
        // Find fields that have been modified
        ([field, value]) => this.originalValues[index][field] !== value
      )
    ),
  }));

This may look like a lot to unpack. However, many of these methods are all related in concept. We take something in, do something with it, and returns something out. This sort of stuff is really common in JavaScript, so you may want to study it a bit. It will save you a lot of time as you come to understand how these functions work.

  • Array.prototype.map: converts one Array into a new Array, transformed by its callback parameter. As a trivial example: [1,2,3,4].map(x=>x*2) returns [2,4,6,8].
  • Array.prototype.filter: takes one Array, examines each index using the callback, and returns a new Array only if a truthy value is returned.
  • Array.prototype.some: takes an array, performs a callback on each index, and returns true if at least one index returns a truthy value.
  • Object.prototype.entries: takes an Object and returns an Array of Array values, where each index in the top level Array has an Array with a length of 2, the key and value.
  • Object.prototype.fromEntries: performs the inverse of Object.prototype.entries; it converts an Array with indices that each contain an Array with a length of 2, being the key and value, and returning an Object.
  • { ...object }: ... assigns all the properties of object during construction of the new object in an Object literal notation.
22
  • Thanks a lot can we please have a quick chat? what's this.filters[index][name] = value; ?
    – user110654
    Commented Sep 8, 2022 at 14:13
  • @Fabien I tried to chat with you yesterday, but we never ended up crossing paths. I'm going back in the chat room from yesterday. Feel free to meet me there.
    – sfdcfox
    Commented Sep 8, 2022 at 14:17
  • do you know how to get the id of removed cell from table : removeRow(event) { this.caseDefaultData.splice(event.target.dataset.index, 1); this.caseDefaultData = this.caseDefaultData.map((x, index)=>({...x, index, rowNumber: index+1})); i want to get the ids of removed cells ..
    – user110654
    Commented Sep 19, 2022 at 15:34
  • 1
    @Fabien Sure. My main system is in for repairs, so I don't have much of my social media hooked up except on my phone, but I do check my email pretty regularly: brianmfear at gmail.
    – sfdcfox
    Commented Sep 19, 2022 at 17:35
  • 1
    @Fabien Because splice returns an array, but we only need the first item, as we're only ever deleting one row at a time. Thinking about it though, we could also write this.deletedRows = [...this.deletedRows, ...this.filters.splice(index, 1)]; if that makes it make more sense.
    – sfdcfox
    Commented Sep 20, 2022 at 12:41

You must log in to answer this question.