Create the Dynamic dropdown in Javascript-CodePudding

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>';
                        }

CodePudding user response：

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);
}

CodePudding user response：

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>