Populate a Select Dropdown List using JSON

Overview #

A common requirement when developing forms on the web is populating a dropdown list using data from a web service or external file.

Suppose we have a form that asks the user for their country followed by the state or province (if applicable). We would want the country selection to determine the list of states/provinces that are displayed.

In this article, we’ll walk through code that populates a dropdown using sample JSON data containing Canadian province names and abbreviations.

Sample Data #

Our sample data can be found at MyJSON with the following contents:

[{
    "name": "Alberta",
    "abbreviation": "AB"
  },
  {
    "name": "British Columbia",
    "abbreviation": "BC"
  },
  {
    "name": "Manitoba",
    "abbreviation": "MB"
  },
  {
    "name": "New Brunswick",
    "abbreviation": "NB"
  },
  {
    "name": "Newfoundland and Labrador",
    "abbreviation": "NL"
  },
  {
    "name": "Nova Scotia",
    "abbreviation": "NS"
  },
  {
    "name": "Northwest Territories",
    "abbreviation": "NT"
  },
  {
    "name": "Nunavut",
    "abbreviation": "NU"
  },
  {
    "name": "Ontario",
    "abbreviation": "ON"
  },
  {
    "name": "Prince Edward Island",
    "abbreviation": "PE"
  },
  {
    "name": "Quebec",
    "abbreviation": "QC"
  },
  {
    "name": "Saskatchewan",
    "abbreviation": "SK"
  },
  {
    "name": "Yukon",
    "abbreviation": "YT"
  }
]

We’ll use the names for the contents of the <option> elements and the abbreviation for the values.

<option value="AB">Alberta</option>

Solutions #

The following solutions manipulate the DOM by populating an HTML select element we’ve defined on our page:

<select id="locality-dropdown" name="locality">
</select>

Our task can be divided into four steps:

Target the dropdown
Clear any existing options
Insert a default option named “Choose State/Province” which is shown as a visual cue
Insert an option for each province found in the JSON data

jQuery #

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
let dropdown = $('#locality-dropdown');

dropdown.empty();

dropdown.append('<option selected="true" disabled>Choose State/Province</option>');
dropdown.prop('selectedIndex', 0);

const url = 'https://api.myjson.com/bins/7xq2x';

// Populate dropdown with list of provinces
$.getJSON(url, function (data) {
  $.each(data, function (key, entry) {
    dropdown.append($('<option></option>').attr('value', entry.abbreviation).text(entry.name));
  })
});

Line 1 targets the select element
Line 3 clears any options in the element
Lines 5-6 appends our default option
Line 8 defines the URL where we can find our JSON data
Lines 11-15 fetch the data and populate the options according to our requirements

Vanilla JavaScript #

Some developers avoid jQuery for performance reasons, so we’ve included two vanilla JavaScript solutions as well. This code is more verbose because we don’t have the getJSON method at our disposal.

Using XMLHttpRequest #

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
let dropdown = document.getElementById('locality-dropdown');
dropdown.length = 0;

let defaultOption = document.createElement('option');
defaultOption.text = 'Choose State/Province';

dropdown.add(defaultOption);
dropdown.selectedIndex = 0;

const url = 'https://api.myjson.com/bins/7xq2x';

const request = new XMLHttpRequest();
request.open('GET', url, true);

request.onload = function() {
  if (request.status === 200) {
    const data = JSON.parse(request.responseText);
    let option;
    for (let i = 0; i < data.length; i++) {
      option = document.createElement('option');
      option.text = data[i].name;
      option.value = data[i].abbreviation;
      dropdown.add(option);
    }
   } else {
    // Reached the server, but it returned an error
  }   
}

request.onerror = function() {
  console.error('An error occurred fetching the JSON from ' + url);
};

request.send();

Line 1 targets the select element
Line 2 clears any options in the element
Lines 4-5 appends our default option
Line 10 defines the URL where we can find our JSON data
Lines 12-13 initializes the remote request
Lines 19-24 creates an option element for each entry found and adds it to the select list
Line 34 sends the remote request

Using Fetch #

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
let dropdown = document.getElementById('locality-dropdown');
dropdown.length = 0;

let defaultOption = document.createElement('option');
defaultOption.text = 'Choose State/Province';

dropdown.add(defaultOption);
dropdown.selectedIndex = 0;

const url = 'https://api.myjson.com/bins/7xq2x';

fetch(url)  
  .then(  
    function(response) {  
      if (response.status !== 200) {  
        console.warn('Looks like there was a problem. Status Code: ' + 
          response.status);  
        return;  
      }

      // Examine the text in the response  
      response.json().then(function(data) {  
        let option;
    
    	for (let i = 0; i < data.length; i++) {
          option = document.createElement('option');
      	  option.text = data[i].name;
      	  option.value = data[i].abbreviation;
      	  dropdown.add(option);
    	}    
      });  
    }  
  )  
  .catch(function(err) {  
    console.error('Fetch Error -', err);  
  });