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: stackoverflow.com/questions/2342371/…

emerson.marini
– emerson.marini

2013-07-20 09:46:15 +00:00
Commented Jul 20, 2013 at 9:46 — emerson.marini
– emerson.marini, Commented Jul 20, 2013 at 9:46
see my answer here stackoverflow.com/a/9995132/740639

Walter Stabosz
– Walter Stabosz

2013-07-20 11:46:43 +00:00
Commented Jul 20, 2013 at 11:46 — Walter Stabosz
– Walter Stabosz, Commented Jul 20, 2013 at 11:46

Vektor88 · Accepted Answer · 2013-07-20 09:47:36Z

0

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>

answered Jul 20, 2013 at 9:47

Vektor88

4,96111 gold badges64 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lucas Willems · Accepted Answer · 2013-07-20 10:00:32Z

0

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.

answered Jul 20, 2013 at 10:00

Lucas Willems

7,1135 gold badges32 silver badges48 bronze badges

Comments

RONE · Accepted Answer · 2013-07-20 10:03:09Z

0

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

answered Jul 20, 2013 at 10:03

RONE

5,5059 gold badges45 silver badges78 bronze badges

Comments

Manoj Yadav · Accepted Answer · 2013-07-20 11:44:30Z

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, 2013 at 11:44

answered Jul 20, 2013 at 10:09

Manoj Yadav

6,6121 gold badge25 silver badges21 bronze badges

8 Comments

user2209033 Over a year ago

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?

Manoj Yadav Over a year ago

Change the url '/echo/json/' with your url and return the response in json format from the url

user2209033 Over a year ago

Sorry, your probably explaining this perfectly but I think i'm missing it. for example, jonathangatenby.co.uk/Candidate/json/destinations.json Is the JSON URL file i will try and use, this would replace '/echo/json/?

Manoj Yadav Over a year ago

Yes, But html file or the file from which you are making the ajax call should be on same domain jonathangatenby.co.uk. Answer updated.

user2209033 Over a year ago

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.

|

Collectives™ on Stack Overflow

Fill HTML dropdown box with external JSON file data

4 Answers 4

Comments

Comments

Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related