JSFiddle - React, Tailwind, and code Playground

by RobertSudwarts

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.0.0/knockout-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<table>
    <thead>
        <tr>
            <th>Id</th>
            <th>Number</th>
            <th>Name</th>
            <th>Password</th>
            <th>Role</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: Employees">
        <tr>
            <td><span data-bind="text: EmployeeId"></span>

            </td>
            <td><span data-bind="text: EmployeeNumber"></span>

            </td>
            <td><span data-bind="text: EmployeeName"></span>

            </td>
            <td><span data-bind="text: EmployeePassword"></span>

            </td>
            <td><span data-bind="text: EmployeeRole"></span>

            </td>
        </tr>
    </tbody>
</table>

JavaScript

$(document).ready(function () {
    var viewModel = {};
    var data = '{"Employees":[{"EmployeeId":1,"EmployeeName":"X","EmployeeNumber":"1","EmployeePassword":"x","EmployeeRole":"User"},{"EmployeeId":10,"EmployeeName":"S","EmployeeNumber":"21","EmployeePassword":"s","EmployeeRole":"Admin"}]}';
    viewModel = ko.mapping.fromJSON(data);
    //console.dir(viewModel);    
    ko.applyBindings(viewModel);
});