JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.3.0.js"></script>
<div>
    

    <div data-bind="foreach: customerList">
        <br />
        <span data-bind='text: FirstName' />
    </div>


      
    <button id="btnGet" data-bind="click:GetAllCustomers">Get All Customers</button>
</div>

JavaScript

var serverData = [{"Id":1,"FirstName":"Rakesh","LastName":"Suresh","Phone":"919239123","Address":"Bangalore"}];

function CustomerDataModel() {

    this.customerList = ko.observableArray([
    { FirstName: "John" },
        { FirstName: "Sam" },
        { FirstName: "Peter" },
        { FirstName: "Vicky"},
        { FirstName: "Amar" }
    ]);        


    this.GetAllCustomers = function () {

        $.ajax({
            url: '/echo/json/',
            type: 'POST',
            data: { json: JSON.stringify(serverData) },
            dataType: 'json',
            contentType: 'application/json',
            context: this,
            success: function (data) {

                var mappedCusts = $.map(data, function (item) { return { FirstName: item.FirstName }; });
               
                this.customerList(mappedCusts);
            },
            error: function (x, y, z) {
                alert(x + '\n' + y + '\n' + z);
            }
        });        
    };
};
ko.applyBindings(new CustomerDataModel());