JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
  <h1 data-bind="foreach:UsersList">
    <div data-bind="text:Name"></div>
    <div data-bind="text:UserName"></div>
  </h1>

JavaScript

function UserViewModel() {
    var self = this;
    self.UsersList = ko.observableArray([]);
    
    var sampleData = [{name : 'Name 1' , username:'Username 1' , id:1},
                      {name : 'Name 2' , username:'Username 2' , id:2},
                      {name : 'Name 3' , username:'Username 3' , id:3},
                      {name : 'Name 4' , username:'Username 4' , id:4}
                     ];
                     
    self.GetUsers = function (){
      $.ajax({
        type: "POST",
        dataType: "json",
        url: baseUrl + 'api/xx/xxx',
        data: jason.strigfy(),
        success: function (data) {
        	//Here you map and create a new instance of userDetailVM
				  self.UsersList($.map(data, function (item) {
            return new UserDetailViewModel(item);
          }));
        }
      });
    }
    
    // comment out below and instead call self.GetUsers() to get your real data via `Ajax`
    self.UsersList($.map(sampleData, function (item) {
            return new UserDetailViewModel(item);
     }));
     
}

function UserDetailViewModel(data){
	var self = this;
   self.Name= ko.observable(data.name);
   self.UserName= ko.observable(data.username);
}


ko.applyBindings(new UserViewModel());