CODEWITHSUNDEEP
javascriptknockout.js
Sandman
Sandman

Reputation: 815

How to filter data with computed using both knockout data and "external" data

Background: I'm in the process of moving javascript logic in a legacy system over to knockout to get more structure and having to write less code in the future. Due to time constraints I can only move parts of the code over to knockout between each deploy.

Problem: Some of the data is generated by legacy code and some of the data is generated by knockout and I'm having problem with creating knockout logic to handle the following scenario (see below for code snippet and a JSFiddle link to the same code). The product radio buttons are not generated by knockout but the offer lists are. The key buttons to filter the offer lists works like I want them to, but I havn't managed to figure out how to get only the offers for product 1 listed under Product 1 and only offers for product 2 listed under Product 2. Anyone that could help?

I assume that if the product headers were generated from the data in the knockout view model my problem wouldn't be so hard to solve, but as you can see this isn't the case.

https://jsfiddle.net/b6er4wke/3/

function myViewModel() {
    var self = this;
    self.wrappedProducts = ko.observableArray();
    self.availableOffers = ko.observableArray();
    self.filterKey = ko.observable(1);
    filteredItems = ko.computed(function() {
        return ko.utils.arrayFilter(self.availableOffers(), function (offer) {
            var isCorrectKey = offer.key == self.filterKey();
            return (isCorrectKey);
        });
    });
    
    self.filter = function(keyFilter) { 
        self.filterKey(keyFilter); 
    };
    
    (function() {
        // Products
        self.wrappedProducts.push({"prod":"1"});
        self.wrappedProducts.push({"prod":"2"});
        // Offers
        self.availableOffers.push({"name": "offer1", "key": "1", "prod": 1});
        self.availableOffers.push({"name": "offer2", "key": "2", "prod": 1});
        self.availableOffers.push({"name": "offer3", "key": "2", "prod": 2});
    })();
}
var viewModel = new myViewModel();
ko.applyBindings(viewModel);
ul, h4 {margin-top: 0px; margin-bottom:0px;}
label {font-weight:bold;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<h4>All products</h4>
<ul data-bind="foreach: wrappedProducts">
    <li data-bind="text: ko.toJSON($data)"></li>
</ul>
<h4>Available offers</h4>
<ul data-bind="foreach: availableOffers">
    <li data-bind="text: ko.toJSON($data)"></li>
</ul>
<div>
    <button data-bind="click: function() {filter(1);}">key1</button>
    <button data-bind="click: function() {filter(2);}">key2</button>
    filterKey = <span data-bind="text: filterKey"></span>
</div>
<hr>
    <label for="prod1">Product 1</label>
<ul data-bind="foreach: filteredItems">
    <li data-bind="text: ko.toJSON($data)"></li>
</ul>
    <label for="prod2">Product 2</label>
<ul data-bind="foreach: filteredItems">
    <li data-bind="text: ko.toJSON($data)"></li>
</ul>

Upvotes: 0

Views: 69

Answers (2)

janfoeh
janfoeh

Reputation: 10328

Knockout automatically wraps your binding expressions in a computed, so you can actually simply make filteredItems a regular function and call it with the product you want to display as a parameter:

filteredItems = function filteredItems(product) {
    return ko.utils.arrayFilter(self.availableOffers(), function (offer) {
        return offer.key == self.filterKey() && offer.prod == product;
    });
};

<label for="prod1">Product 1</label>
<ul data-bind="foreach: filteredItems(1)">
  <li data-bind="text: ko.toJSON($data)"></li>
</ul>

<label for="prod2">Product 2</label>
<ul data-bind="foreach: filteredItems(2)">
  <li data-bind="text: ko.toJSON($data)"></li>
</ul>

and still have it update automatically when availableOffers changes.

function myViewModel() {
    var self = this;
    self.wrappedProducts = ko.observableArray();
    self.availableOffers = ko.observableArray();
    self.filterKey = ko.observable(1);
    filteredItems = function filteredItems(product) {
        return ko.utils.arrayFilter(self.availableOffers(), function (offer) {
            return offer.key == self.filterKey() && offer.prod == product;
        });
    };
    
    self.filter = function(keyFilter) { 
        self.filterKey(keyFilter); 
    };
    
    (function() {
        // Products
        self.wrappedProducts.push({"prod":"1"});
        self.wrappedProducts.push({"prod":"2"});
        // Offers
        self.availableOffers.push({"name": "offer1", "key": "1", "prod": 1});
        self.availableOffers.push({"name": "offer2", "key": "2", "prod": 1});
        self.availableOffers.push({"name": "offer3", "key": "2", "prod": 2});
    })();
}
var viewModel = new myViewModel();
ko.applyBindings(viewModel);
ul, h4 {margin-top: 0px; margin-bottom:0px;}
label {font-weight:bold;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<h4>All products</h4>
<ul data-bind="foreach: wrappedProducts">
    <li data-bind="text: ko.toJSON($data)"></li>
</ul>
<h4>Available offers</h4>
<ul data-bind="foreach: availableOffers">
    <li data-bind="text: ko.toJSON($data)"></li>
</ul>
<div>
    <button data-bind="click: function() {filter(1);}">key1</button>
    <button data-bind="click: function() {filter(2);}">key2</button>
    filterKey = <span data-bind="text: filterKey"></span>
</div>
<hr>
    <label for="prod1">Product 1</label>
<ul data-bind="foreach: filteredItems(1)">
    <li data-bind="text: ko.toJSON($data)"></li>
</ul>
    <label for="prod2">Product 2</label>
<ul data-bind="foreach: filteredItems(2)">
    <li data-bind="text: ko.toJSON($data)"></li>
</ul>

Upvotes: 2

Jeff
Jeff

Reputation: 2423

Well, The you were just displaying the results of the same computed. So, that's why under Prod 1 and Prod 2 you were getting the same results. If you want to filter by product and key, you'll need two computed functions that filter that for you.

The code you're missing inside your arrayFilter was this:

var isCorrectKey = offer.key == self.filterKey();
var isCorrectProduct = offer.prod == 2;
return isCorrectKey && isCorrectProduct;

You have to check for product and key.

function myViewModel() {
    var self = this;
    self.wrappedProducts = ko.observableArray();
    self.availableOffers = ko.observableArray();
    self.filterKey = ko.observable(1);
    filteredItemsKey1 = ko.computed(function () {
        return ko.utils.arrayFilter(self.availableOffers(), function (offer) {
            var isCorrectKey = offer.key == self.filterKey();
            var isCorrectProduct = offer.prod == 1;
            return isCorrectKey && isCorrectProduct;
        });
    });

    filteredItemsKey2 = ko.computed(function () {
        return ko.utils.arrayFilter(self.availableOffers(), function (offer) {
            var isCorrectKey = offer.key == self.filterKey();
            var isCorrectProduct = offer.prod == 2;
            return isCorrectKey && isCorrectProduct;
        });
    });
    self.filter = function(keyFilter) { 
        self.filterKey(keyFilter); 
    };
    
    (function() {
        // Products
        self.wrappedProducts.push({"prod":"1"});
        self.wrappedProducts.push({"prod":"2"});
        // Offers
        self.availableOffers.push({"name": "offer1", "key": "1", "prod": 1});
        self.availableOffers.push({"name": "offer2", "key": "2", "prod": 1});
        self.availableOffers.push({"name": "offer3", "key": "2", "prod": 2});
    })();
}
var viewModel = new myViewModel();
ko.applyBindings(viewModel);
ul, h4 {margin-top: 0px; margin-bottom:0px;}
label {font-weight:bold;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<h4>All products</h4>
<ul data-bind="foreach: wrappedProducts">
    <li data-bind="text: ko.toJSON($data)"></li>
</ul>
<h4>Available offers</h4>
<ul data-bind="foreach: availableOffers">
    <li data-bind="text: ko.toJSON($data)"></li>
</ul>
<div>
    <button data-bind="click: function() {filter(1);}">key1</button>
    <button data-bind="click: function() {filter(2);}">key2</button>
    filterKey = <span data-bind="text: filterKey"></span>
</div>
<hr>
    <label for="prod1">Product 1</label>
<ul data-bind="foreach: filteredItemsKey1">
    <li data-bind="text: ko.toJSON($data)"></li>
</ul>
    <label for="prod2">Product 2</label>
<ul data-bind="foreach: filteredItemsKey2">
    <li data-bind="text: ko.toJSON($data)"></li>
</ul>

Upvotes: 0

Related Questions