JSFiddle - React, Tailwind, and code Playground

by Jan Föh

HTML

<div width="100%" data-bind="foreach: mainArray">Position: <span width="25%" data-bind="text: SlotPosition"></span>
    <br>TypeId: <span width="25%" data-bind="text: OurTypeId"></span>
    <br>Type: <span width="25%" data-bind="text: OurType"></span>
    <br>
    <br>
    <select data-bind="options: $root.slots, optionsValue: 'Value', optionsText: 'Text', value: $data.SlotPosition"></select>
    <select data-bind="options: $root.ourTypes, optionsValue: 'ID', optionsText: 'Name', value: $data.OurTypeId"></select>
    <br>_________________________________
    <br>
    <br>
</div>

JavaScript

var dataList = [{
    SlotPosition: 1,
    OurTypeId: 4
}, {
    SlotPosition: 2,
    OurTypeId: 2
}, {
    SlotPosition: 3,
    OurTypeId: 3
}];
var ourTypes = [{
    ID: 1,
    Name: "None",
    Limit: 0
}, {
    ID: 2,
    Name: "Fruits",
    Limit: 5
}, {
    ID: 3,
    Name: "Vegetables",
    Limit: 5
}, {
    ID: 4,
    Name: "Meats",
    Limit: 2
}];

var slots = [{
    Text: "1",
    Value: 1
}, {
    Text: "2",
    Value: 2
}, {
    Text: "3",
    Value: 3
}];

var myViewModel = new MyViewModel(dataList);
ko.applyBindings(myViewModel);

function MyViewModel(dataList) {
    var self = this;
    self.slots = slots;
    self.ourTypes = ourTypes;
    self.mainArray = ko.observableArray([]);
    self.ActiveSlotList = ko.observableArray([0]);

    if (dataList.length > 0) {
        for (var i = 0; i < dataList.length; i++) {
            var myDataViewModel = new MyDataViewModel(dataList[i]);
            self.mainArray.push(myDataViewModel);
        }
    }
}

function MyDataViewModel(vm) {
    var self = this;
    if (vm != null) {
        var myType = "";
        for (var i = 0; i < ourTypes.length; i++) {
            if (ourTypes[i].ID == vm.OurTypeId) myType = ourTypes[i].Name;
        }
        self.SlotPosition = ko.observable(vm.SlotPosition);
        self.OurTypeId = ko.observable(vm.OurTypeId);
    } else {
        self.SlotPosition = ko.observableArray([{
            Text: "",
            Value: ""
        }]);
        self.OurTypeId = 0;
    }
    
    self.OurType = ko.computed(function() {
        
        return ko.utils.arrayFirst(ourTypes, function(type) {
            return type.ID == self.OurTypeId();
        }).Name;
        
    });
}