0

I am populating an array with a Key and value while checking a checkbox and trying to remove the key/value while unchecking the checkbox in LWC

It works if I check/uncheck one of the checkbox. In case of two checkboxes, it shows 2 for array size while checking both .However,if I uncheck one of the checkboxes it shows the array size as 0. That means it's removing both the items.

this.name = event.detail.name;
this.realValue = event.detail.realValue;
if (this.checkboxChecked === true) {
  this.fieldToUpdate.push({ key: this.name, value: this.realValue });
} else if (this.checkboxChecked === false) {
  this.fieldToUpdate = this.fieldToUpdate.splice(
    this.fieldToUpdate.filter(
      (key) => key !== event.detail.name,
      (value) => value !== event.detail.realValue
    ),
    0
  );
}

I even tried only filter function which does nothing.(not removing any item)

this.fieldToUpdate = this.fieldToUpdate.filter(key => key !== event.detail.name, value => value !== event.detail.realValue);

1 Answer 1

1
  this.fieldToUpdate = this.fieldToUpdate.splice(
    this.fieldToUpdate.filter(
      (key) => key !== event.detail.name,
      (value) => value !== event.detail.realValue
    ),
    0
  );

I need to break this into multiple parts.

First, you have several problems with filter. filter typically takes just one parameter, while you're providing two:

    this.fieldToUpdate.filter(
      (key) => key !== event.detail.name, // 1st parameter
      (value) => value !== event.detail.realValue // 2nd parameter
    ),

In addition, filter passes in the entire object, which means that you'd need to use those properties from the parameter provided:

this.fieldToUpdate.filter(
  ({ key, value }) =>
    key !== event.detail.name && value !== event.detail.realValue
);

Second, your use of splice is incorrect.

  this.fieldToUpdate = this.fieldToUpdate.splice(
    this.fieldToUpdate.filter(...), // Returns an array
    0
  );

The first parameter is the starting element to start from. A single number. You're not giving it a number, so nothing happens. Also, splice returns an array of the deleted elements, which there were none, so you're wiping out the array.

Third, you're using a single variable for checkboxChecked. This variable is likely meant to be local, but I'm just guessing. A variable can only hold a single object at a time, so this is very unclear code.

Fourth, I've never seen realValue, so I'm not sure where that's coming from. A custom event, perhaps?

At any rate, splice updates the array it is called upon, so you don't need its return value.

Finally, you don't need to care about the value, only the key should be needed to find the correct entry. That's what a key does.

So, ultimately, your code should look more like:

this.fieldToUpdate.splice(
  // Returns the index of the first matching element
  this.fieldToUpdate.findIndex(
    ({ key }) => key === event.detail.name
  ),
  1 // Delete one element
);

Honestly, it'd be better to keep track of the fields as an Object instead of a list of items. That would reduce your code to just:

if(checkboxChecked) {
  this.fieldToUpdate[key] = value;
} else {
  delete this.fieldToUpdate[key];
}

Whenever you need your Array of key-value items, you can:

const updates = Object.entries(this.fieldToUpdate).map(([key, value]) => ({
  key,
  value,
}));

Where entries converts an Object into an Array of two-element Array values, with index 0 being the key, and 1 the value, and map converts every element in an array from the given input to the given output; here, we use this to change each key-value entry from Object.entries into a list of objects with the key and value property set for each entry.

You must log in to answer this question.

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