Populate Dropdown With AJAX JSON (Simple Example)

Welcome to a quick tutorial on how to populate an HTML dropdown list with AJAX and JSON. Need to dynamically load the dropdown options from the server? No problem, it is actually a simple process – Read on for the example!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes AJAX Dropdown Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

AJAX LOAD DROPDOWN OPTIONS

All right, let us now get into the example of dynamically loading the dropdown options using AJAX and JSON.

 

PART 1) THE HTML

1-page.html
<select id="demo"></select>

Nothing to see here, just the regular empty <select> with no options.

 

PART 2A) AJAX FETCH

2a-fetch.js
// (A) FETCH DATA FROM SERVER
fetch("3-data.json")
 
// (B) PARSE JSON
.then(res => res.json())
 
// (C) LOOP THROUGH DATA & GENERATE OPTIONS
.then(data => {
  let select = document.getElementById("demo");
  data.forEach((item, i) => {
    let option = document.createElement("option");
    option.innerHTML = item;
    select.appendChild(option);
  });
});

To fire an AJAX request to the server, we can use fetch(). This is seemingly complicated at first, but keep calm and look carefully.

  1. Specify the URL to fetch the data from.
  2. Parse the JSON response from the server.
  3. Lastly, loop through the parsed array of data and create the options.

 

 

PART 2B) AJAX XML HTTP REQUEST

2b-xhr.js
// (A) NEW XMLHTTPREQUEST OBJECT
var xhr = new XMLHttpRequest();
xhr.open("GET", "3-data.json");
 
// (B) PARSE JSON & CREATE OPTIONS
xhr.onload = () => {
  let data = JSON.parse(xhr.response),
      select = document.getElementById("demo");
 
  data.forEach((item, i) => {
    let option = document.createElement("option");
    option.innerHTML = item;
    select.appendChild(option);
  });
};
 
// (C) GO!
xhr.send();

Alternatively, we can also use the good old XMLHttpRequest to fire an AJAX request. A little bit long-winded, but it does the same thing as fetch.

 

PART 3) DUMMY JSON DATA

3-data.json
["Apple","Blueberry","Cherry","Durian","Elderberry"]

Finally, this is just a dummy JSON encoded array of fruits. It does not matter which server-side language you are using. Just JSON encode the data array and output it.

 

 

USEFUL BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

FETCH & XHR – WHICH ONE SHOULD WE USE?

Well, both of them work. For the uninitiated:

  • XMLHttpRequest is the “traditional version”. It is very stable and well-supported even in the older browsers.
  • fetch is the “modern version”. It has more features but is not supported in the older browsers.

So it’s up to you – I have personally moved on to using fetch.

 

COMPATIBILITY CHECKS

This example will work on all modern “Grade A” browsers.

 

LINKS & REFERENCES

 

INFOGRAPHIC CHEAT SHEET

Populate Dropdown With AJAX JSON (Click To Enlarge)

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published.