JSFiddle - React, Tailwind, and code Playground
HTML
<div id='output'></div>
JavaScript
var json = [{
"Property1": [{
"IsDropDown": "true",
"Value": "Drp1Value1"
},
{
"IsDropDown": "true",
"Value": "Drp1Value2"
},
{
"IsDropDown": "false",
"Value": "Link1"
}
]
},
{
"Property2": [{
"IsDropDown": "true",
"Value": "Drp2Value1"
},
{
"IsDropDown": "true",
"Value": "Drp2Value2"
},
{
"IsDropDown": "false",
"Value": "Link1"
}
]
}
];
var i, j, p;
var controls = '';
for (i = 0; i < json.length; i++) {
for (p in json[i]) {
let select = p;
if (json[i].hasOwnProperty(p)) {
controls += '<select name=' + p + '><br/>';
for (j = 0; j < json[i][p].length; j++) {
console.log(json[i])
controls += '<option value=' + json[j] + '>' + json[i][p][j].Value + '</option></br>';
}
controls += '</select>';
break; // from for loop, since we only want one select per top-level object
}
}
}
document.getElementById('output').innerHTML = controls;