Fill HTML dropdown box with external JSON file data

Question

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.

Possible duplicate: http://stackoverflow.com/questions/2342371/jquery-loop-on-json-data-using-each — emerson.marini, Jul 20 '13 at 09:46
see my answer here http://stackoverflow.com/a/9995132/740639 — Walter Stabosz, Jul 20 '13 at 11:46

score 0 · Answer 1 · answered Jul 20 '13 at 09:47

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.

Example

<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>

score 0 · Answer 2 · answered Jul 20 '13 at 10:00

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.

score 0 · Answer 3 · answered Jul 20 '13 at 10:03

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 Fiddle Demo

Manoj Yadav · Answer 4 · 2013-07-20T11:44:30.690

0

Use each and append select like this:

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

jsFiddle

Updated Example (test.html for http://jonathangatenby.co.uk/Candidate/json/destinations.json)

<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)

edited Jul 20 '13 at 11:44

answered Jul 20 '13 at 10:09

Manoj Yadav

6,560
1
23
21

Hi, on your jsFiddle example, it does gather the destinations, but how do you gather the JSON from an external file and not from the Javascript? – Jul 20 '13 at 10:26
Change the url `'/echo/json/'` with your `url` and return the response in `json` format from the `url` – Manoj Yadav Jul 20 '13 at 10:30
Sorry, your probably explaining this perfectly but I think i'm missing it. for example, http://jonathangatenby.co.uk/Candidate/json/destinations.json Is the JSON URL file i will try and use, this would replace '/echo/json/? – Jul 20 '13 at 10:43
Yes, But html file or the file from which you are making the `ajax` `call` should be on same `domain` http://jonathangatenby.co.uk. Answer updated. – Manoj Yadav Jul 20 '13 at 10:53
Thanks for all your help so far, but there is still no luck im afraid. I have copied the code you have provided, but when 'Fetch JSON' is pressed, nothing is fetched. I apologise about this and appreciate your help very much. – Jul 20 '13 at 11:05
Make sure `jQuery` reference is added ` – Manoj Yadav Jul 20 '13 at 11:11
Like so? – Jul 20 '13 at 11:16
Answer updated with `jQuery` reference and `$(document).ready` Try (test.html on jonathangatenby.co.uk) – Manoj Yadav Jul 20 '13 at 11:47

Fill HTML dropdown box with external JSON file data

4 Answers4

Linked