JSFiddle - React, Tailwind, and code Playground

by no1_melman

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Company</th>
            <th>Position</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: customers">
        <tr>
            <td data-bind="text: name"></td>
            <td data-bind="text: company"></td>
            <td data-bind="text: position"></td>
        </tr>
    </tbody>
</table>

JavaScript

var CUS = {
    getJSON: function (callback) {
        callback(CUS.Data);
    },
    Data: [
        {name: "Callum", company: "Chevie Web Design", position: "CEO"},
        {name: "Rich", company: "Blizzard", position: "CEO"},
        {name: "Dan", company: "UnLawful", position: "CEO"}
    ]
};

function Customer (data) {
    this.name = ko.observable(data.name);
    this.company = ko.observable(data.company);
    this.position = ko.observable(data.position);
}

function CustomerListViewModel() {
    // Data
    var self = this;
    self.customers = ko.observableArray([]);

    // Operations
    
    // Load initial state from server, convert it to Task instances, then populate self.tasks
    CUS.getJSON(function(allData) {
        var mappedCustomers = $.map(allData, function(item) { return new Customer(item) });
        console.log(mappedCustomers);
        self.customers(mappedCustomers);
    });
}

ko.applyBindings(new CustomerListViewModel());