JSFiddle - React, Tailwind, and code Playground

by jlspake

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<span data-bind="text: ko.toJSON(allterms)"></span>
<br/>

<div id="termdata">
    <select id="termsList" name="Term" data-bind="foreach: allterms">
        <optgroup data-bind="attr: { label: name}, foreach: termRoot">
					<option data-bind="text: name"></option>
            <optgroup data-bind="attr: { label: name},foreach: termGroup">
                <option data-bind="text: name"></option>
            </optgroup>                
        </optgroup>
    </select>
</div>

JavaScript

var termData = [
			{
					"name": "Root 1", 
					"termRoot": [{
							"name": "Group 1", 
							"termGroup": [{
									"name": "termGroup1",
									"terms": [
										{ "name": "option 1" }, 
										{ "name": "option 2" }, 
										{ "name": "option 3" }
									]
							}]
					}]
			}, 
			{
					"name": "Root 2", 
					"termRoot": [{
							"name": "Group 2", 
							"termGroup": [{
									"name": "termGroup2",
									"terms": [
											{ "name": "option A" }, 
											{ "name": "option B" }, 
											{ "name": "option C" }
									]
							}]
					}]
			}
		];

    var TermViewModel = function () {
        var self = this;
        self.allterms = ko.observableArray(termData);
    }

    ko.applyBindings(new TermViewModel());