JSFiddle - React, Tailwind, and code Playground

by shubh0602

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<select data-bind="options: Users, optionsText: 'Name', optionsValue: 'Id',value: 'SelectedUser' }"></select>

JavaScript

var MyModule = (function () {

    var Users = ko.observableArray([]);
    var SelectedUser=ko.observable();
    //Call initialize method from .ready
    function init() {

        loadUsers();
        ko.applyBindings(this);
    }
   
    function loadUsers() {
        var ajaxdata = DummyAjaxCall(); //get all profiles

        $.each(ajaxdata, function (index, value) {
            Users.push(new UserViewModel(value)); //Create a Model
        });
        var temp=Users.sort();
        Users(temp);
        //SelectedUser(22);//Hardcoded
        console.log(Users); //View it

    }

    // explicitly return public methods when this object is instantiated
    return {
        Init: init,

        Users: Users,
        //selectionChanged:selectionChanged,
        SelectedUser:SelectedUser
    };

})(window);

//  example usage
MyModule.Init(); // Call the INIT method for mymodule
function UserViewModel(data) {
    var self = this

    self.Id = data.Id;
    self.Name = data.Name;


}

function DummyAjaxCall() {
    //Sample Data
    var multipleData = [];
    var ajaxData = {};
    ajaxData.Id = 20;
    ajaxData.Name = "John Doe";

    multipleData.push(ajaxData);


    var ajaxData2 = {};
     ajaxData2.Id = 22;
    ajaxData2.Name = "Will Smith";;
    multipleData.push(ajaxData2);
    
    var ajaxData3 = {};
    ajaxData3.Id = 2;
    ajaxData3.Name = "The Smurfs";

    multipleData.push(ajaxData3);

    return multipleData;
}