CODEWITHSUNDEEP
knockout.js
Joemar Zeta
Joemar Zeta

Reputation: 53

Create Filter condition inside data-bind: foreach

Is it possible to create a filter inside the foreach. My goal here is to display the specific data from my ko.obervableArray. On the sample i created on JS Fiddle my goal is to display only the type="family".

https://jsfiddle.net/zo8ygfk4/111/

<table>
    <thead>
    <tr><th>name</th><th>address</th><th>Type</th></tr>
    </thead>
    <tbody id="sample" data-bind="foreach: items">
    <!-- ko: type === 'family' -->
        <tr>
            <td data-bind="text: name"></td>
            <td data-bind="text: address"></td>
            <td data-bind="text: type"></td>
        </tr>
        <!-- /ko -->
    </tbody>
</table>


var people = [
    { name: "Contact 1", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "family" },
        { name: "Contact 1", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "family" },
            { name: "Contact 1", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "family" },
    { name: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "friend", Type: "1" },
     { name: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "friend", Type: "1" },
      { name: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "friend", Type: "1" },
       { name: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "friend", Type: "1" },
];


var quotesarray = function(){
var self=this;
    self.items = ko.observableArray();

      window.setInterval(function(){
      self.items.removeAll();
        ko.utils.arrayPushAll(self.items, people)
    },1000);


};


ko.applyBindings(new quotesarray()
)

Upvotes: 0

Views: 125

Answers (2)

MKougiouris
MKougiouris

Reputation: 2861

Do not use the containerless if syntax for this little thingy, it might get the job done but you really do not need to do it, it has much poorer performance than other solutions AND its gets your dom dirty. You can try using a computed, that will evaluate itself when the original array changes and it will return only the family items from that array each time

You may try the following:

self.familyItems = ko.pureComputed(function(){
    return self.items().filter(function(i){ return i.type === 'family'})
});

then bind your foreach against the familyItems instead of the items

Upvotes: 1

Ciki
Ciki

Reputation: 51

You have a typo in your HTML code: "ko: type === 'family'" must be replaced with "ko if: type === 'family'"

var people = [
  { name: "Contact 1", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "family" },
  { name: "Contact 1", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "family" },
  { name: "Contact 1", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "family" },
  { name: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "friend", Type: "1" },
  { name: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "friend", Type: "1" },
  { name: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "friend", Type: "1" },
  { name: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "friend", Type: "1" },
];


var quotesarray = function(){
var self=this;
    self.items = ko.observableArray();

      window.setInterval(function(){
      self.items.removeAll();
        ko.utils.arrayPushAll(self.items, people)
    },1000);


};


ko.applyBindings(new quotesarray()
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table>
    <thead>
    <tr><th>name</th><th>address</th><th>Type</th></tr>
    </thead>
    <tbody id="sample" data-bind="foreach: items">
    <!-- ko if: type === 'family' -->
        <tr>
            <td data-bind="text: name"></td>
            <td data-bind="text: address"></td>
            <td data-bind="text: type"></td>
        </tr>
        <!-- /ko -->
    </tbody>
</table>

Upvotes: 1

Related Questions