var MoviesModel = function(data) {
var self = this;
self.Genres = ko.observableArray(data.genres);
self.Genres.unshift("All");
self.filterGenre = ko.observable("All");
self.Languages = ko.observableArray(data.languages);
self.Languages.unshift("All");
self.filterLanguage = ko.observable("All");
self.Lengths = ko.observableArray(data.lengths);
self.Lengths.unshift("All");
self.filterLength = ko.observable("All");
self.movies = ko.observableArray(data.movies);
self.filteredMovies = ko.computed(function() {
var filteredArray = ko.utils.arrayFilter(self.movies(), function(item) {
return (
(item.genre == self.filterGenre() || self.filterGenre() == "All") &&
(item.language == self.filterLanguage() || self.filterLanguage() == "All") &&
(item.length == self.filterLength() || self.filterLength() == "All")
);
});
return filteredArray;
});
};
var data = {
genres: ["Drama", "Horror", "Sci-Fi"],
languages: ["English", "Russian"],
lengths: ["100", "120", "140", "160"],
movies: [
{ name: "Godfather", genre: "Drama", language: "English", length: "160" },
{ name: "The shining", genre: "Horror", language: "English", length: "140"},
{ name: "Stalker", genre: "Sci-Fi", language: "Russian", length: "160" },
{ name: "Alien", genre: "Sci-Fi", language: "English", length: "120" },
{ name: "Russiam ark", genre: "Drama", language: "Russian", length: "100" },
{ name: "Psycho", genre: "Horror", language: "English", length: "120" }
]
};
var viewModel = new MoviesModel(data);
ko.applyBindings(viewModel);
table td {
padding-right: 20px;
}
<table>
<thead>
<tr>
<td>Movie name</td>
<td>Genre</td>
<td>Language</td>
<td>Length</td>
</tr>
<tr>
<td></td>
<td>
<select data-bind="options: Genres, value: filterGenre"></select>
</td>
<td>
<select
data-bind="options: Languages, value: filterLanguage"
></select>
</td>
<td>
<select data-bind="options: Lengths, value: filterLength"></select>
</td>
</tr>
</thead>
<tbody data-bind="foreach: filteredMovies">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: genre"></td>
<td data-bind="text: language "></td>
<td data-bind="text: length"></td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>