JSFiddle - React, Tailwind, and code Playground

by youssef moudine

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<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: selected"></select>
  <span data-bind="text: selected().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;
  });
};

var vm = {
  choices: ko.observableArray([{
    "_id": "5964a85bd76cde8a7a8c06ae",
    "name": "inovgroup"
  }, {
    "_id": "5964a86cd76cde8a7a8c06af",
    "name": "devox"
  }, {
    "_id": "5964a891d76cde8a7a8c06b0",
    "name": "IAM"
  }]),
  choice: ko.observable({
    "_id": "5964a891d76cde8a7a8c06b0",
    "name": "IAM"
  }),
  selected: ko.observable()
};


vm.selected = ko.computed(() => {
  return vm.choices.find("_id", vm.choice())
  console.log('computed');
  var choice = ko.mapping.toJS(vm.choice);
  var choices = ko.mapping.toJS(vm.choices);
  var index = -1;
  choices.forEach((e, i) => {
    if (e._id == choice._id) {
      index = i;
    }
  })
  console.log(index)
})

ko.applyBindings(vm);