Tips for displaying an array list in a dropdown menu

Question

Tips for displaying an array list in a dropdown menu

After trying many methods and searching on Google, I have come to a dead end and decided to ask here for help.

My question pertains to displaying data in a select option dropdown menu using JSON array list.

Below is the code snippet:

<select name="" id="state_list">
     <option>Select State</option>
</select>



<script>      
var url = "#";

function getData() {
    fetch(url)
        .then((data) => {
            return data.json();
        })
        .then((covidData) => {

            var dropdown = document.getElementById("state_list");
            var stateList = covidData.data.regional;

            for (i = 0; i < stateList.lenght; i++) {
                dropdown[dropdown.lenght] = new Option(stateList[i],stateList[i]); 
            }
        })
</script>

javascript arrays

Answer 1

Answer №1

To populate your drop-down with the stateList values, you can use the code snippet below:

var select = document.getElementById("state_list"); 
for(var i = 0; i < stateList.length; i++) {
    var opt = stateList[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
}

You can view a working example in this fiddle:

http://jsfiddle.net/shyntz0o/1/

Answer 2

To populate your drop-down with the stateList values, you can use the code snippet below:

var select = document.getElementById("state_list"); 
for(var i = 0; i < stateList.length; i++) {
    var opt = stateList[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
}

You can view a working example in this fiddle:

http://jsfiddle.net/shyntz0o/1/

Answer 3

Answer №2

You made a mistake in spelling with "lenght" and forgot to properly close the function (missing the final "}"). Additionally, your logic for appending options is incorrect due to the misspelling of "lenght".

window.onload = function(){
  var url = "https://api.rootnet.in/covid19-in/stats/latest";

  function getData(){
    fetch(url)
      .then((data) => {
        return data.json();
      })
      .then((covidData) => {
        var dropdown = document.getElementById("state_list");
        var stateList = covidData.data.regional;

        for(var i=0; i<stateList.length; i++){
           dropdown.appendChild(new Option(stateList[i].loc, stateList[i].loc))
        }
      })
   };

   getData()
 }

<select name="" id="state_list">
     <option>select state</option>
</select>

Answer 4

You made a mistake in spelling with "lenght" and forgot to properly close the function (missing the final "}"). Additionally, your logic for appending options is incorrect due to the misspelling of "lenght".

window.onload = function(){
  var url = "https://api.rootnet.in/covid19-in/stats/latest";

  function getData(){
    fetch(url)
      .then((data) => {
        return data.json();
      })
      .then((covidData) => {
        var dropdown = document.getElementById("state_list");
        var stateList = covidData.data.regional;

        for(var i=0; i<stateList.length; i++){
           dropdown.appendChild(new Option(stateList[i].loc, stateList[i].loc))
        }
      })
   };

   getData()
 }

<select name="" id="state_list">
     <option>select state</option>
</select>

Tips for displaying an array list in a dropdown menu

Answer №1

Answer №2

Similar questions

Encountered an issue while executing the npm run dev command in a React project

Why is Puppeteer failing to download to the designated folder using "Page.setDownloadBehavior" in Windows?

Graphql query using $http.post is unsuccessful

What is the process for executing a function if the Materialize.css autocomplete feature is not chosen?

Adding a KMZ layer to Google Maps with Vue 2

Disabling a button based on the state of a switch button using React and Material UI

What is the best way to transfer a multidimensional array from PHP to JavaScript?

What are the differences between Sitecore Analytics and Adobe Analytics? How do they each utilize JavaScript

`Failure to prompt an error following an unsuccessful post request in a node.js application using axios and express`

Is there a way to retrieve the request object within loopback operational hooks?

showing the names of MySQL columns stored in an array along with their corresponding data

Unusual marker appearing on every page utilizing ionic v1 and angularjs

Utilizing Javascript to load a vast amount of data onto the browser, followed by initiating an XML

Extending fabric.js toObject with custom properties can result in the loss of default properties

Using a pipe filter to implement a search feature in an Ionic search bar

Mongoose JS is unable to display the query value in the output

What is the purpose of using href="javascript:void()?

Expanding size on hover without affecting the alignment of surrounding elements

Layered parallax scenery

Exploring the possibilities of developing WebComponents within Angular using TypeScript