JSFiddle - React, Tailwind, and code Playground

by Vinit Divekar

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div class="row">
  <div class="col-md-3">
    <div class="form-group">
      <label class="control-label">Select Service</label>
      <select class="form-control" data-bind="options : serviceList, value :selectedService, optionsText : 'serviceName', optionsValue : 'serviceId'"></select>
    </div>

  </div>
</div>

JavaScript

function sendAjaxRequest(url, type, data, successCallbackFunction, errorCallbackFunction) {
  $.ajax({
    url: url,
    type: type,
    data: JSON.stringify(data),
    datatype: "json",
    processData: false,
    contentType: "application/json; charset=utf-8",
    async: false,
    success: successCallbackFunction,
    error: errorCallbackFunction
  });
}


function ServiceOverviewViewModel() {

  this.testObservable = ko.observable();
	this.serviceList = ko.observableArray([]);
  this.selectedService = ko.observable();
  
  this.testFunction = function() {
    console.log("This is a test function");
  };

  this.getServiceList = function() {
  	// Following is a Test URL. In my application, the URL I use returns me list of objects.
    sendAjaxRequest("https://httpbin.org/get", "get", null, this.getServiceListSuccess, this.getServiceListError);
  };

  this.getServiceListSuccess = function(response) {
  	// In my application I load the serviceList with the list received in the response.
    // In this example I am trying to push dummy data.
    // This line gives me error as 'this.serviceList is not a function'
    this.serviceList({serviceId : 1, serviceName : 'Test'});
  };

  this.getServiceListError = function(response) {

  };

  // On Load send the ajax call
  this.getServiceList();
}

var serviceOverviewViewModel = new ServiceOverviewViewModel();
ko.applyBindings(serviceOverviewViewModel);