Using ES6 without the need for jQuery, populate a select element with JSON data using Javascript

Question

Using ES6 without the need for jQuery, populate a select element with JSON data using Javascript

I have a json-formatted dataset that I want to incorporate into my select options.

Here is the data:

 {
    "timezones": 
    {
        "country": "Africa",
        "tz": "Africa/Abidjan"
    },
    {
        "country": "America",
        "tz": "America/Anguilla"
    }
}

Below is the current select menu:

<select>

    <optgroup label="Africa">
        <option value="Africa/Abidjan">Adak</option>
    </optgroup>

    <optgroup label="America">
        <option value="America/Adak">Anguilla</option>
    </optgroup>

</select>

Is there a way to dynamically populate the select menu with the json data provided, without using jQuery?

javascript json

Answer 1

Answer №1

One way to achieve this is by using the `appendChild` method along with the `.forEach` method.

let data = {
    "timezones": 
    [{
        "country": "Africa",
        "tz": "Africa/Abidjan"
    },
    {
        "country": "America",
        "tz": "America/Anguilla"
    }]
};
let select = document.getElementById('countrySelect');
data.timezones.forEach(function(item){
  let newOptGroup= document.createElement('optgroup');
  newOptGroup.label=item.country;
  let option=document.createElement('option');
  option.value=item.tz;
  option.text=item.tz;
  newOptGroup.appendChild(option);
  select.appendChild(newOptGroup);
});

<select id="countrySelect">

</select>

Answer 2

One way to achieve this is by using the `appendChild` method along with the `.forEach` method.

let data = {
    "timezones": 
    [{
        "country": "Africa",
        "tz": "Africa/Abidjan"
    },
    {
        "country": "America",
        "tz": "America/Anguilla"
    }]
};
let select = document.getElementById('countrySelect');
data.timezones.forEach(function(item){
  let newOptGroup= document.createElement('optgroup');
  newOptGroup.label=item.country;
  let option=document.createElement('option');
  option.value=item.tz;
  option.text=item.tz;
  newOptGroup.appendChild(option);
  select.appendChild(newOptGroup);
});

<select id="countrySelect">

</select>

Answer 3

Answer №2

In the beginning, your JSON data is considered invalid. The 'timezones' attribute should either be an array or have an index on every object.

Below is the provided data:

let data = {
  "timezones": [
  {
      "country": "Africa",
      "tz": "Africa/Abidjan"
  },
  {
      "country": "America",
      "tz": "America/Anguilla"
  }]
}

Here's how I would populate the options:

data.timeszones.forEach(function(timezone) {
  let optionGroup = document.createElement('optgroup');
      optionGroup.setAttribute('label', timezone.country);

  let option = document.createElement('option');
      option.setAttribute('value', timezone.tz);

  optionGroup.appendChild(option);
  document.getElementById('selectionList').appendChild(optionGroup);
});

Lastly, ensure to assign an ID to your <select> element.

<select id='selectionList'>
    <optgroup label="Africa">
        <option value="Africa/Abidjan">Adak</option>
    </optgroup>

    <optgroup label="America">
        <option value="America/Adak">Anguilla</option>
    </optgroup> 
</select>

Answer 4

In the beginning, your JSON data is considered invalid. The 'timezones' attribute should either be an array or have an index on every object.

Below is the provided data:

let data = {
  "timezones": [
  {
      "country": "Africa",
      "tz": "Africa/Abidjan"
  },
  {
      "country": "America",
      "tz": "America/Anguilla"
  }]
}

Here's how I would populate the options:

data.timeszones.forEach(function(timezone) {
  let optionGroup = document.createElement('optgroup');
      optionGroup.setAttribute('label', timezone.country);

  let option = document.createElement('option');
      option.setAttribute('value', timezone.tz);

  optionGroup.appendChild(option);
  document.getElementById('selectionList').appendChild(optionGroup);
});

Lastly, ensure to assign an ID to your <select> element.

<select id='selectionList'>
    <optgroup label="Africa">
        <option value="Africa/Abidjan">Adak</option>
    </optgroup>

    <optgroup label="America">
        <option value="America/Adak">Anguilla</option>
    </optgroup> 
</select>

Using ES6 without the need for jQuery, populate a select element with JSON data using Javascript

Answer №1

Answer №2

Similar questions

Restrict the Angular ng-repeat directive to specific rows only

Tips for successfully transferring values or parameters within the Bootstrap modal

I'm looking to efficiently convert JSON or GeoJSON data into a Backbone model and then seamlessly transition that model into a Leaflet layer. Can anyone provide guidance on

Using Next.js Link prefetch feature can lead to unexpected 404 errors on a production website

When using a jsonp ajax call, the response is successfully returned as json in Firebug, but unfortunately it

Tally the quantity of data points within jQuery Datatables

Incorporate the casper function within the casper.evaluate() method

The encoding for double quotation marks vanishes when used in the form action

The term 'Buffer' is not recognized in the context of react-native

Creating a buffered transformation stream in practice

Using PHP to access Steam API data in JSON format

Executing a curl POST request within an npm script

Issue with Mat-AutoComplete arising while utilizing a formArray

Switch between showing or hiding at least three divs

Balancing asynchronous tasks - masteringlearnode - program that initially succeeded but eventually faltered

Issue encountered while trying to display Twitter search outcomes

java JSON responses containing long values that have been rounded

URL for requesting JSON data using Zend Framework

Having trouble with the click button flip function? It seems to be working in one section but not in

The function `jQuery .html('<img>')` is not functional in Firefox and Opera browsers