JSFiddle - React, Tailwind, and code Playground

by youssef moudine

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-debug.js"></script>
<div class="field">
  <select class="ui dropdown" data-bind="
                                         options: choices,
                                         optionsText: 'name',
                                         value: choice">
  </select>
  <span data-bind="text: choice().name"></span>
</div>

JavaScript

ko.observableArray.fn.find = function(prop, data) {
    var valueToMatch = data[prop]; 
    return ko.utils.arrayFirst(this(), function(item) {
        return item[prop] === valueToMatch; 
    });
};

function ViewModel(choices, choice) {
   this.choices = ko.observableArray(choices);
   this.choice = ko.observable(this.choices.find("_id", choice)); 
};


var choices = [
        {
						"_id" : "5964a85bd76cde8a7a8c06ae",
						"name" : "inovgroup"
					},
					{
						"_id" : "5964a86cd76cde8a7a8c06af",
						"name" : "devox"
					},
					{
						"_id" : "5964a891d76cde8a7a8c06b0",
						"name" : "IAM"
					}
    ];

var choice = {
						"_id" : "5964a891d76cde8a7a8c06b0",
						"name" : "IAM"
					};



ko.applyBindings(new ViewModel(choices, choice));
///////////////////////////////////////////