Removing item from array and add it to another array

Question

I am displaying to the user a series of divs with content in them and the user is able to remove the div from the page so that they no longer see it.

I would like to take the same div content that was removed from an array and add it into another array that will be used to populate a dropdown list.

this is what i have:

//Remove function
removeCategory(index: number): void {
    this.categories.splice(index, 1);
}
//Array
categories: Array<Item> = [
    new Item(1, 'test1'),
    new Item(2, 'test2')
];
//New Array to add previous removed item
ddoptions: Array<object> = [];

Is it possible to do a push statement before the splice in the removeCategory function? I am not sure of what to pass in since doing this gives me an error:

this.ddoptions.push(index);

Just take a look at what splice returns. The code above is too fragmentary to show you exactly where to put it, but that should be more than enough to get you there. — T.J. Crowder
– T.J. Crowder, Commented Mar 23, 2017 at 8:38

James Hay · Accepted Answer · 2020-03-24 08:52:36Z

11

Updated for 2020

With the newer ES specifications you can also use the destructuring assignment operator on an array, which means you don't have to use concat or apply a push function in a given context. This was actually around at the time I wrote this originally, but it's far more common to see now.

this.ddoptions.push(...this.categories.splice(index, 1));

However the rules from below still apply, using push and splice will mutate existing arrays, so concat should probably still be used if you want immutability.

Original Answer

You can splice into the push method directly, as splice returns the removed object.

this.ddoptions.push(this.categories.splice(index, 1)[0]);

The splice method actually returns an array of elements that were removed. In your case, you are only removing one so the above code works. If you are removing one or more elements, you can add these to the second array with several methods.

By using concat to generate a new array:

this.ddoptions = this.ddoptions.concat(this.categories.splice(index, 1));

This may break things because ddoptions is no longer the same object. It depends on what you're doing and what angular is doing.

You can pass the array as multiple arguments to push by applying the push prototype.

[].push.apply(this.ddoptions, this.categories.splice(index, 1));

In this way ddoptions will remain as the same array and will push all new elements into it.

edited Mar 24, 2020 at 8:52

answered Mar 23, 2017 at 8:40

James Hay

7,3656 gold badges35 silver badges59 bronze badges

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

1 Comment

Reyan Tropia Over a year ago

This should work. Although the first one would fit his needs i think.

gyre · Accepted Answer · 2017-03-23 08:53:24Z

3

Array#splice conveniently returns an array containing the deleted elements:

removeCategory (index) {
  this.ddoptions.push( this.categories.splice(index, 1)[0] )
}

View TypeScript Demo

JavaScript Demo:

class Item {
  constructor(a, b) { return [a, b] }
}

class Example {
  removeCategory (index) {
    this.ddoptions.push( this.categories.splice(index, 1)[0] )
  }
  //Array
  categories = [
    new Item(1, 'test1'),
    new Item(2, 'test2')
  ]
  //New Array to add previous removed item
  ddoptions = []
}

var example = new Example()

example.removeCategory(1)

console.log(example.ddoptions)

edited Mar 23, 2017 at 8:53

answered Mar 23, 2017 at 8:41

gyre

16.8k4 gold badges40 silver badges47 bronze badges

Comments

Quentin Morrier · Accepted Answer · 2017-03-23 08:40:20Z

2

Splice returns an array of the deleted elements. You could maybe add a size test of the array, to be sure there is an element inside..

//Remove function
removeCategory(index: number): void {
    var deletedElement = this.categories.splice(index, 1);
    ddoptions.push(deletedElement[0]);
}

answered Mar 23, 2017 at 8:40

Quentin Morrier

7555 silver badges15 bronze badges

Collectives™ on Stack Overflow

Removing item from array and add it to another array

3 Answers 3

1 Comment

View TypeScript Demo

JavaScript Demo:

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

JavaScript Demo:

Comments

Comments

Your Answer

Sign up or log in

Post as a guest