JSFiddle - React, Tailwind, and code Playground

by poztin

HTML

<div data-bind="foreach: groups">
    <div data-bind="text: name"></div>
    <div data-bind="with: groupMembers">
                
    </div>
</div>

JavaScript

var viewModel = {   
    groups: [
        { "id": 1, "name" : "tekken characters", "members": [1, 3] },
        { "id": 2, "name" : "mario characters", "members": [2] }
    ],
    
    members: [
        { "id": 1, "name": "nina williams" }, 
        { "id": 2, "name": "super mario" }, 
        { "id": 3, "name": "yoshi mitsu" }
    ],
    
    groupMembers: ko.computed(function() {
        return members;
    }, this)
};

ko.applyBindings(viewModel);