Knockout JS Binding and Filter Data

Question

I have the following Problem

I have this Code to load Json Data from a external Web api and Show it in my site this works..

but my Problem is I must FILTER the Data with a Dropdown List

When i select the Value "Show all Data" all my Data must be Show and when i select the Value "KV" in the Dropdown only the Data with the Text "KV" in the Object Arbeitsort must Show..

How can i integrate a Filter in my Code to Filter my Data over a Dropdown ?

and the next is how can i when i insert on each Item where in HTML Rendered a Button to Show Details of this Item SHOWS his Detail Data ?

when i click Details in a Item i must open a Box and in this Box i must Show all Detail Data of this specific Item ?

$(document).ready(function () {
function StellenangeboteViewModel() {
    var self = this;
    self.stellenangebote = ko.observableArray([]);
    self.Kat = ko.observable('KV');

    $.getJSON('http://api.domain.comn/api/Stellenangebot/', function (data) {
        ko.mapping.fromJS(data, {}, self.stellenangebote);
    });


}

ko.applyBindings(new StellenangeboteViewModel());
});

Tanner Tanner · Accepted Answer · 2014-02-25T10:14:39

I'll give this a go, but there's quite a few unknowns here. My suggestions are as follows:

First, create a computed for your results and bind to that instead of self.stellenangebote

self.stellenangeboteFiltered = ko.computed(function () {
    // Check the filter value - if no filter return all data
    if (self.Kat() == 'show all data') {
        return self.stellenangebote();
    }
    // otherwise we're filtering
    return ko.utils.arrayFilter(self.stellenangebote(), function (item) {
        // filter the data for values that contain the filter term
        return item.Arbeitsort() == self.Kat();
    });
});

With regards the detail link, I'm assuming you are doing a foreach over your data in self.stellenangeboteFiltered(), so add a column to hold a link to show more details:

<table style="width:300px">
    <thead>
        <tr>
            <th>Id</th>
            <th>Arbeitsort</th>
            <th>Details</th>
        </tr>
    </thead>

    <tbody data-bind="foreach: stellenangeboteFiltered">
        <tr>
            <td><span data-bind="text: Id"> </span></td>
            <td><span data-bind="text: Arbeitsort"> </span></td>
            <td><a href="#" data-bind="click: $parent.showDetail">Detail</a></td>
        </tr>
    </tbody>
</table>

Add a control to show details:

<div data-bind="visible: detailVisible, with: selectedItem">
    <span data-bind="text: Position"> </span>
    <span data-bind="text: Arbeitsort"> </span>
</div>

In your JS add a function:

// add some observables to track visibility of detail control and selected item
self.detailVisible = ko.observable(false);
self.selectedItem = ko.observable();

// function takes current row
self.showDetail= function(item){
    self.detailVisible(true);
    self.selectedItem(item);
};

UPDATE

Here's an updated fiddle: JSFiddle Demo

Knockout JS Binding and Filter Data

1 Answers