Create the Dynamic dropdown in Javascript

Question

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

Answer 1

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

Answer 2

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>

Create the Dynamic dropdown in Javascript

Question

2 answers

solution1
1 ACCPTED 2021-11-30 06:29:09

solution2
1 2021-11-30 06:29:25

Create the Dynamic dropdown in Javascript

Question

2 answers

solution1 1 ACCPTED 2021-11-30 06:29:09

solution2 1 2021-11-30 06:29:25

solution1
1 ACCPTED 2021-11-30 06:29:09

solution2
1 2021-11-30 06:29:25