CODEWITHSUNDEEP
knockout.js
super-user
super-user

Reputation: 1057

Knockout Filter observableArray against another observableArray

Let's say I have an observableArray named completeArray and another observableArray named pickedArray, this second array(pickedArray) contains some of the objects of the completeArray. From these 2 arrays, I need to make another observableArray which will contain all the objects in my completeArray which are NOT IN the pickedArray. If anyone can help me how it is done please comment if you need to clarify something. Thank you!

Upvotes: 0

Views: 287

Answers (1)

kspearrin
kspearrin

Reputation: 10768

Use a computed observable array of the difference between completeArray and pickedArray.

Javascript

var ViewModel = function () {
    var self = this;

    self.completeArray = ko.observableArray([{id: 1, name: "john"}, {id: 2, name: "bill"}, {id: 3, name: "tom"}]);
    self.pickedArray = ko.observableArray([{id: 1, name: "john"}, {id: 3, name: "tom"}]);

    self.diffArray = ko.computed(function() {
        return ko.utils.arrayFilter(self.completeArray(), function(completeItem) {
            var sameItem = false;

            ko.utils.arrayForEach(self.pickedArray(), function(pickedItem) {
                if(pickedItem.id == completeItem.id && pickedItem.name == completeItem.name) {
                    sameItem = true;
                    return; // break out of this loop
                }
            });

            return !sameItem;
        });
    }, self);
};

$(function () {
    var vm = new ViewModel();
    ko.applyBindings(vm);
});

HTML

<h1>Complete Array</h1>
<div data-bind="foreach: completeArray()">
    <span data-bind="text: $data.name"></span>
</div>

<h1>Picked Array</h1>
<div data-bind="foreach: pickedArray()">
    <span data-bind="text: $data.name"></span>
</div>

<h1>Diff Array</h1>
<div data-bind="foreach: diffArray()">
    <span data-bind="text: $data.name"></span>
</div>

Output

Complete Array
john bill tom

Picked Array
john tom

Diff Array
bill

Example

http://jsfiddle.net/jdtjmy6u/3/

Upvotes: 1

Related Questions