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

Guidelines for utilizing recursion in order to calculate the sum of specified values within a multidimensional array

Finding the identifier for resources through excluding external influences

Utilizing Firebase messaging onMessage function is exclusively enabled within a window environment

jasmine and protractor test failing due to use of byID

Firefox causing issues with Rails Ajax functionality

Determine the specific button that was clicked within a React component

The debate between using backticks and colons in TypeORM queries

Obtaining a fresh access token from a refresh token using the googleapis npm library

Issues with jQuery code functionality within web forms

Guide to utilizing a JWT token within an httpOnly cookie for accessing a secured API endpoint

How to dynamically disable options in a Vuetify v-select based on the type of object value

Transferring information from the router to the server file using Node.js and Express

The returned type of intersected functions in Typescript does not match the inferred type

Angular movie database using an API from an apiary

Utilize JavaScript and jQuery to extract the selected text's context from a webpage

Display the outcomes of two MongoDB queries simultaneously on a single page

Navigating with nodeJS

trigger a function when the iframe is altered

What is the most effective way to display a card with varying values depending on the user's input in a form?

Looking to conceal a JavaScript file or minimize it from the web browser following production build in React