JSFiddle - React, Tailwind, and code Playground

by origineil

HTML

<fieldset>
    <legend>Example using event driven filtering</legend>
    <select class="tab-content" data-bind="options: gruposA, optionsText: 'nombre', value: filtro"></select>
    <ul data-bind="foreach: subgruposPorGrupo">
        <li><span data-bind="text: hash"></span>

        </li>
    </ul>
</fieldset>
<fieldset>
    <legend>Example using a function for filtering</legend>
    <div class="tab-content" data-bind="foreach: {data: gruposA, as: 'groupA'}">
        <ul>
            <li><span data-bind="text: groupA.nombre"></span>
<ul data-bind="foreach:  $root.filter(groupA) ">
                <li><span data-bind="text: hash"></span>

                </li>
            </ul>
            </li>
            
        </ul>
    </div>
</fieldset>

JavaScript

function Grupo(id, nombre) {
    var self = this;
    self.id = id;
    self.nombre = nombre;
};

function Subgrupo(id, nombre, grupo) {
    var self = this;
    self.id = id;
    self.nombre = nombre;
    self.grupo = grupo
    self.hash = "Group2: " + id + name;
};


function MainConsultaViewModel() {
    var self = this;
    self.gruposA = ko.observableArray();
    self.gruposB = ko.observableArray();

    self.filtro = ko.observable();
    self.filter = function (param) {
 
        var sub = ko.utils.arrayFilter(self.gruposB(), function (item) {
            return item.grupo.id == param.id && item.grupo.nombre == param.nombre;
        }) 
        return sub; 
    }
    this.subgruposPorGrupo = ko.computed(function () {

        if (self.filtro()) {

            var subGroup = ko.utils.arrayFilter(this.gruposB(), function (item) {

                return item.grupo.id == self.filtro().id && item.grupo.nombre == self.filtro().nombre;
            });

            return subGroup;
        }
        return [];
    }, this);
};

var vm = new MainConsultaViewModel();

var populateModel = function () {
    for (var i = 0; i < 2; i++) {

        vm.gruposA.push(new Grupo(i, "name" + i));
    };

    for (var i = 1; i <= 10; i++) {
        var grupo = new Grupo(i % 2, "name" + i % 2)
        vm.gruposB.push(new Subgrupo(i, "name" + i, grupo));
    };
}();
ko.applyBindings(vm);