Fill HTML dropdown box with external JSON file data


I am trying to fill a HTML Dropdown menu with data from an external JSON file, which contains the following

{ "Destinations": [ { "destinationName": "London", "destinationID": "lon" }, { "destinationName": "New York", "destinationID": "nyc" }, { "destinationName": "Paris", "destinationID": "par" }, { "destinationName": "Rome", "destinationID": "rom" } ] }

What I would like is the drop down menu to display the destinationName, such as London, New York etc but i'm confused as how to approach this.

Any help is appreciated.


Create a <select> tag in your html and fill it with <option> using the value attribute. Value will be your destinationID, but it will show destinationName.

<a href="http://www.w3schools.com/tags/att_option_value.asp" rel="nofollow">Example</a>

<form action="demo_form.asp"> <select name="cars"> <option value="volvo">Volvo XC90</option> <option value="saab">Saab 95</option> <option value="mercedes">Mercedes SLK</option> <option value="audi">Audi TT</option> </select> <input type="submit" value="Submit"> </form>


Try this code :

$.getJSON('yourfile.json', function(data) { destinations = data['Destinations'] $.each(destinations, function(id, destination) { destination = destination["destinationName"] alert(destination) }) });

It allows you to get the destination value in the destination variable, for, after, can do everything with values of this variable.


Consider you have got the response from server like

{ "Destinations": [ { "destinationName": "London", "destinationID": "lon" }, { "destinationName": "New York", "destinationID": "nyc" }, { "destinationName": "Paris", "destinationID": "par" }, { "destinationName": "Rome", "destinationID": "rom" } ] }

Then your next step should be iteration of that json

$.each(data.Destinations, function(key, val) { items.append('<option value="' + val.destinationID + '">' + val.destinationName + '</option>'); });

YOu can see the demo here <a href="http://jsfiddle.net/Fa9H5/1/" rel="nofollow">Fiddle Demo</a>


Use each and append select like this:

$.each(data.Destinations, function(i, v) { $('#destinations').append('<option value="' + v.destinationID + '">' + v.destinationName + '</option>'); });

<strong><a href="http://jsfiddle.net/manoj_admlab/Mta5b/3/" rel="nofollow">jsFiddle</a></strong>

Updated Example (test.html for <a href="http://jonathangatenby.co.uk/Candidate/json/destinations.json" rel="nofollow">http://jonathangatenby.co.uk/Candidate/json/destinations.json</a>)

<select id="destinations"> <option value="">Select</option> </select> <a href="#" id="fetch">Fetch JSON</a> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script> $(document).ready(function() { $('#fetch').click(function() { $.post('http://jonathangatenby.co.uk/Candidate/json/destinations.json', {}, function(data) { $.each(data.Destinations, function(i, v) { $('#destinations').append('<option value="' + v.destinationID + '">' + v.destinationName + '</option>'); }); }); }); }); </script>

Example to work make sure html file or the file from which you are making the ajax call are on same domain (jonathangatenby.co.uk)


  • c# merge objects
  • JQuery Passing Variable From href to load()
  • Individual Preferences for each item in a ListView?
  • Can someone explain the exact use of interfaces in C#?
  • Rails 3, Custom Actions, and HTML request methods
  • how to pass class attribute and value to markdown syntax
  • How to check if DIV element is disabled using jquery
  • Yii2: Using Kartik Depdrop Widget?
  • CoreData basics – to-many relationship array data
  • Client side validation mvc dropdown
  • Should a web service response include empty values?
  • Pass array from parent template to child template
  • C# List of Panels
  • Jquery Mobile pageLoading() Method how does it work?
  • Bootstrap (v3.3.4) glyphicons not displayed in IE when refresh page (F5)
  • How to return DataSet (xsd) in WCF
  • Implementing “partial void” in VB
  • Combining two different ActiveRecord collections into one
  • Sending HTML Form Data to Spring REST Web Service
  • Automatically associate new Sonar project with custom quality profile and quality gate
  • why xml file does not aligned properly after append the string in beginning and end of the file usin
  • Custom validator control occupying space even though display set to dynamic
  • HTML download movie download link
  • Sending data from AppleScript to FileMaker records
  • Importing jscolor library in angular 2
  • what is the difference between the asp.net mvc application and asp.net web application
  • jQuery tmpl and DataLink beta
  • json Serialization in asp
  • SQL merge duplicate rows and join values that are different
  • KeystoneJS: Relationships in Admin UI not updating
  • AngularJs get employee from factory
  • Proper way to use connect-multiparty with express.js?
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • Load html files in TinyMce
  • How to set the response of a form post action to a iframe source?
  • How do you join a server to an Active Directory (domain)?
  • How does Linux kernel interrupt the application?
  • Easiest way to encapsulate a HTML5 webpage into an android app?
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?