KnockoutJS: Remove array of items from an array

Question

I have a problem with knockoutJS i can't figure out

I have two observableArrays; One containing all available items and one containing all selected items.

How can i return a new array, that contains all the available items ( with all the selected items removed from it)?

Answer 1

I'd use .filter or ko.utils.arrayFilter, and .indexOf or equivalent:

this.remainingOptions = ko.computed(function(){
    return this.availableOptions().filter(function(option) {
        return this.selectedOptions().indexOf( option ) === -1;
    }.bind(this));
},this);

Fiddle: http://jsfiddle.net/p3RMD/1/

Edit: Also see the Knockout Projections plugin if you want more efficient .map and .filter methods on observableArrays

Answer 2

The standard removeAll method should handle this. From documentation:

myObservableArray.removeAll(['Chad', 132, undefined]) removes all values that equal 'Chad', 123, or undefined and returns them as an array

Do you need to extract the available items without altering the original, all available items array?

Answer 3

If you want to return a new array, without modifying the original array, your best bet is to use a computed observable.

var ViewModel = function(){
    this.available = ko.observableArray([1,2,3,4,5]);
    this.selected = ko.observableArray([1,3,5]);

    this.remaining = ko.computed(function(){
        var remaining = ko.observableArray();
        remaining(ko.toJS(this.availableOptions))
        remaining.removeAll(this.selectedOptions());
        return remaining();
    }, this);
}

Here's a link to a working example:

http://jsfiddle.net/nathanjones/p3RMD/

Edit: fixed sample code.