Angular 7 - Splice and Remove (Dropdown Values) from Array

Question

I have an open dropdown with multiple options. I created a simple pickList out of with two. I am using splice to remove selected values from the array after button click but when the selection is multiple, splice seems to remove all but the ones selected.

For example: in my list to the right - if i choose San Francisco, Miami, Boston and Las Vegas then move them over to the selected box on the right. This works perfect.

The issue is choosing Boston & Miami then clicking the left arrow to remove, removes all but the selected ones. I have used splice before but I do not remember it ignoring the items in array.

And my code component looks like this:

<select [(ngModel)]="foundLocations" multiple="multiple">
    <option *ngFor="let locOption of locations" [ngValue]="locOption" >
      {{ locOption }}
    </option>
</select>
<div class="selectButtons">
  <button (click)="selectThese()">></button>
    <br/>
  <button (click)="removeThese()"><</button>
</div>
<select [(ngModel)]="selectedLocations" multiple="multiple">
    <option *ngFor="let chosen of pickedLocationItems" [ngValue]="chosen" >
      {{ chosen }}
    </option>
</select>

and in my component looks like:

  foundLocations: any;
  selectedLocations: any = [];
  pickedLocationItems: any = [];

  locations: any = ["San Francisco", "Seattle", "Las Vegas", "Toronto", "Boston", "Miami", "Altantic City"];

  selectThese() {
    for (var i = 0; i < this.foundLocations.length; i++) {
      this.checkSelLocation(this.foundLocations[i]);
    }
  }

  checkSelLocation(x: any) {
    console.log("Check sel locations");
    console.log(x);
    this.pickedLocationItems.push(x);
  }

  removeThese() {
    for (var g = 0; g < this.selectedLocations.length; g++) {
      this.pickedLocationItems.splice(g, 1); 
    }
  }

I have a Stackblitz example here.

Naga Sai A · Accepted Answer · 2019-06-26 21:04:54Z

1

To achieve expected result, change you removeThese method as below

Index which you are choosing to splice is wrong(because index of g starts from 0 and actual selected location may not start with index -0 )
First find index by indexOf
Splice using that index

removeThese() { for (var g = 0; g < this.selectedLocations.length; g++) { this.pickedLocationItems.splice(this.pickedLocationItems.indexOf(this.selectedLocations[g]), 1); } }

working code sample for reference- https://stackblitz.com/edit/angular-xwwevl?file=src/app/app.component.ts

edited Jun 26, 2019 at 21:04

answered Jun 26, 2019 at 20:58

Naga Sai A

11k1 gold badge24 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MsNichols Over a year ago

Took a bit of time for me to realize it was an issue with the index. Thanks, i used your example after almost giving up and it worked perfectly.

Ace · Accepted Answer · 2019-06-26 20:11:57Z

0

Splice is the wrong tool here. What you want to do is filter out any elements that are selected like so:

removeThese() {
    this.pickedLocationItems = this.pickedLocationItems.filter(item => !this.selectedLocations.includes(item));
  }

Array.splice removes a range of elements starting at an index, so in order to use that, you would need to find the index of each selected item and splice that index, because the selection may not be contiguous. The way you were using it, you were looping from 0 to the length of the selection array, which does not correspond to the index of the selected elements. Using Array.filter gets the job done in one go by removing all values that exist in the selection array.

edited Jun 26, 2019 at 20:11

answered Jun 26, 2019 at 20:06

Ace

1,1462 gold badges11 silver badges27 bronze badges

Collectives™ on Stack Overflow

Angular 7 - Splice and Remove (Dropdown Values) from Array

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related