JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdn.jsdelivr.net/jsrender/1.0pre35/jsrender.min.js"></script>
<div id="progDetails">
<table id="progTable"></table>
<select id="brokerTeam"></select>
</div>
<script id="progDetailsTemplate" type="text/x-jsrender">
{{for Programmes}}
<tr><td>{{>GroupName}}</td></tr>
{{/for}}
</script>
<script id="brokerTeamTemplate" type="text/x-jsrender">
{{if ControlName == "BrokerTeam"}}
<option value="{{>ID}}">{{>Value}}</option>
{{else}}
<option value="{{>ID}}">{{>Value}} NOT BROKER</option>
{{/if}}
</script>
JavaScript
$(document).ready(function() {
var dataResults = {
"Programmes" : [
{
ProgID: 1,
GroupName: "Default"
},
{
ProgID: 2,
GroupName: "My new group"
}
],
LookUpData : [
{
ID: 1,
Value: "Test",
ControlName: "BrokerTeam"
},
{
ID: 2,
Value: "Test 2",
ControlName: "BrokerTeam"
},
{
ID: 3,
Value: "Test 3",
ControlName: "BrokerTeam"
},
{
ID: 123,
Value: "Test",
ControlName: "NotBrokerTeam"
},
{
ID: 332,
Value: "Test 2",
ControlName: "NotBrokerTeam"
},
{
ID: 13,
Value: "Test 3",
ControlName: "NotBrokerTeam"
}
]
};
BuildProgs();
LookupData();
function BuildProgs()
{
$("#progTable").append(
$("#progDetailsTemplate").render(dataResults)
);
}
function LookupData()
{
$("#brokerTeam").append(
$("#brokerTeamTemplate").render(dataResults.LookUpData)
);
}
});