1

I just want to remove a value from an Array in LWC using the method replace with RegExp.

@track myList = ['a', 'b', 'c'];
@track removeValue = 'b';

if (this.myList.includes(this.removeValue)) {
   if (this.myList.indexOf(',' + this.removeValue + ',') !== -1) {
       this.myList.replace(new RegExp(',?' + this.removeValue + ',?'), ','));
  } else { 
     this.myList.replace(new RegExp(',?' + this.removeValue + ',?'), ''));
    }
}

The basic intention is to replace the value on myList and to make sure that I also remove ',' in both and keep on one ',' if it is a middle value on the list. If not a middle value then remove the value for an empty value. This is working just fine on my aura components but with LWC I'm struggling to get this done. Anyone knows how to do this operation in LWC?

UPDATE gNerb is suggesting a solution that for this case is not working. I don't need to pass the values to somthing like this:

<template>
<div>Items:</div>
<template for:each={subLineItems} for:item="item">
    <div key={item}>{item}</div>
</template>
<lightning-button label="Filter" onclick={handleClick}></lightning-button>

import { LightningElement, track } from 'lwc';

 export default class App extends LightningElement {

@track subLineItems = ['1', '2', '3', '4'];
@track subName = '3';

handleClick(event) {
    this.subLineItems = this.subLineItems.filter(item => item !== this.subName);
  }
 }

The code above works just fine. I need to pass 'myList' to a lightning-texarea field:

<lightning-textarea
                name="MyList__c"
                label="My List"
                readonly
                disabled
                required
                value={myList}>
        </lightning-textarea>

On the playground it works... :( .. there is something I'm missing here.

Playground Test

UPDATE

I just want to let you guys know what was the problem here and how I solved this issue. The problem was that I was receiving data from a Long text area, as you can see on the HTML. This long text area fields are not Arrays :( ... what you can do in to transform MyList to a variable:

var myListToString = this.myList.toString();

// now we make a string of it
   var myListToArray = myListToString.split(',');

// now we use what gNerb was saying
   myListToArray = myListToArray.filter(value => value !== removeValue);
   myList = myListToArray;

That did it for me...

2
  • Does it have to be regex? – gNerb Nov 18 '19 at 21:43
  • No, if it does the trick..In aura I use this approach and it is fine but in LWC I am more than happy to use anything that gives me the same result.. – Carlos Naranjo Nov 18 '19 at 21:44
2

Someone was kind enough to show me a pretty easy way to do this in JS:

@track myList = ['a', 'b', 'c'];
@track removeValue = 'b';

this.myList = this.myList.filter(value => value !== this.removeValue);

Docs

One of the things to keep in mind is that in order for @track to work, the array has to be a new array, not just an updated one. The benefit to filter is that it will return a new array.

Copy Pasta

HTML:

<template>
    <template for:each={values} for:item="value">
        <lightning-button 
            key={value}
            variant="base" 
            label={value}
            title={value}
            onclick={handleClick} 
            class="slds-m-left_x-small">
        </lightning-button>
    </template>
</template>

JS:

import { LightningElement, track} from 'lwc';

export default class testLwc extends LightningElement {
    @track values = [
        'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i',
    ];

    handleClick(event) {
        this.values = this.values.filter(value => value !== event.target.label);
    }
}

This is minimum viable code to show how this works. I created this component and embeded into a community page and tested and works as expected.

6
  • It is not removing the value :( – Carlos Naranjo Nov 18 '19 at 21:50
  • Let me check, I'm pretty sure I am using it in an active LWC right now so I can try to dig out my code. – gNerb Nov 18 '19 at 21:50
  • @CarlosNaranjo I updated my answer with some copy pasta that I tested and verified that it does work. – gNerb Nov 18 '19 at 22:09
  • It is not working @gNerb... the idea is to pass removeValue instate value !== event.target.label ... I tried that but is not removing the value from the array ... – Carlos Naranjo Nov 18 '19 at 22:20
  • As stated, the above is copy pasta and does work in my tests as expected, if you're having issues the issue is likely somewhere else in your code. – gNerb Nov 18 '19 at 22:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.