Anyone guides me, How to create the dynamic dropdown using the below array/JSON in javascript?
[
{
"1": "001",
"2": "002",
"3": "003"
}
];
What I have done :
let text = "<select class='form-control'><option value=''>All</option>";
var array = [
{
"1": "001",
"2": "002",
"3": "003"
}
];
for (var i = 0; i < array.length; i++) {
// POPULATE SELECT ELEMENT WITH JSON.
text += '<option value=' + array[i]["1"] + '>'+ array[i]["1"] +'</option>';
}
Creating Select element using JavaScript:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to create a SELECT and an OPTION element.</p>
<button onclick="myFunction()">Try it</button>
<script>
const customItems = [
{
"1": "001",
"2": "002",
"3": "003"
}
];
function myFunction() {
const x = document.createElement("SELECT");
x.setAttribute("id", "mySelect");
document.body.appendChild(x);
for (let i = 0; i < customItems.length; i++) {
for (let key in customItems[i]) {
const z = document.createElement("option");
z.setAttribute("value", customItems[i][key]);
const t = document.createTextNode(customItems[i][key]);
z.appendChild(t);
document.getElementById("mySelect").appendChild(z);
}
}
}
</script>
</body>
</html>use Object.entries() to read field in object.
var array = [
{
"1": "001",
"2": "002",
"3": "003"
}
];
var x = document.createElement("SELECT");
x.setAttribute("id", "mySelect");
document.body.appendChild(x);
for (const [key, value] of Object.entries(array[0])) {
var z = document.createElement("option");
z.setAttribute("value", key);
var t = document.createTextNode(value);
z.appendChild(t);
document.getElementById("mySelect").appendChild(z);
}