JSFiddle - React, Tailwind, and code Playground

by kyrisu

HTML

<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js"></script>
<script src="https://github.com/SteveSanderson/knockout.mapping/raw/master/build/output/knockout.mapping-latest.debug.js"></script>
<select data-bind="options: odata, optionsText: 'Name', value: selected"></select><br/>
ODATA:
<ul data-bind="foreach: odata">
<li data-bind="text: Name"></li>
</ul>
SELECTED:<br/>
<span data-bind="text: ko.toJSON(selected)"></span>
<br/>
-----
<ul data-bind="foreach: fodata()">
<li data-bind="text: Name"></li>
</ul>

JavaScript

var data = [
{"Id":4,"ParentId":1,"Name":"Item1","Selected":false},
{"Id":5,"ParentId":1,"Name":"Item2","Selected":false},
{"Id":6,"ParentId":2,"Name":"Item3","Selected":false}];

vm = {
    odata: ko.mapping.fromJS(data),
    selected: ko.observable()
}
vm.fodata = ko.computed(function(){
        return ko.utils.arrayFilter(vm.odata(), function(item){
    return item.ParentId() === vm.selected() ? vm.selected().ParentId() : 1;
        });                
    });

ko.applyBindings(vm);