Fill dropdown with json data

Question

i need to fill dropdown with cities and set the value with city airport code, i have the following jquery code, i'm wondering whats wrong with it? its not filling the dropdown

<script>
    $(document).ready(function () {
        $(function (request, response) {
            $.ajax({
                url: "http://iatacodes.org/api/v4/cities",
                jsonp: "callback",
                dataType: "jsonp",
                data: {
                    api_key: "XXX-XXXX-XXXXXX-XXXXX"
                },
                success: function (data) {
                    if (data) { // success
                        response($.map(data, function (item) {
                            return $('<option>').val(item.code).text(item.name);
                        })).appendTo('#Cities');
                    } else { // no results
                        response();
                    }
                }
            });
        });
    });
</script>

<select class="selectpicker" id="Cities" name="Cities">
      <option value="" selected>Select City</option>
</select>

raw data shortened

{"request":{"lang":"en","currency":"THB","time":81,"id":"babdee58-12c3-4ea2-b4c5-db750f646c6a","server":"a","pid":24092,"key":{"id":4870,"api_key":"XXXX-XXXX-XXXX-XXXX-XXXXXXX","type":"free","expired":null,"registered":"2015-11-27T05:16:52.000Z","affiliate_account":0,"affiliate_currency":"USD","affiliate_percent":33,"affiliate_paypal":"Hi, if you want to be our partner just contact us [email protected]","limits_by_hour":2500,"limits_by_minute":250,"usage_by_hour":12,"usage_by_minute":0},"params":{"lang":"en"},"client":{"country_code":"PH","country":"Philippines","city":"Makati","lat":14.566699999999997,"lng":121.0333,"ip":"112.199.36.67"}},"response":[{"code":"AAA","country_code":"PF","name":"Anaa","lat":-17.05,"lng":-145.41667,"updated":"2015-10-05T18:07:47.000Z"},{"code":"AAB","country_code":"AU","name":"Arrabury","lat":-26.7,"lng":141.04167,"updated":"2015-10-07T16:33:06.000Z"},{"code":"AAC","country_code":"EG","name":"El Arish","lat":31.133333,"lng":33.75,"updated":"2015-10-07T15:57:39.000Z"},{"code":"AAE","country_code":"DZ","name":"Annaba","lat":36.821392,"lng":7.811857,"updated":"2015-10-05T18:07:47.000Z"},{"code":"AAF","country_code":"US","name":"Apalachicola","lat":29.733334,"lng":-84.98333,"updated":"2015-10-07T15:57:39.000Z"},{"code":"AAG","country_code":"BR","name":"Arapoti","lat":-24.103611,"lng":-49.79,"updated":"2015-10-07T15:57:39.000Z"}

the data type is jsonp i think you need a callback function to get the data from that. not sure though. are you getting any result? — guradio
– guradio, Commented Dec 2, 2015 at 3:36
Your json data is not jsonp. You could use dataType: "json". However, you could have CORS issues, because the Access-Control-Allow-origin:* may not be present in your response. — Danny Fardy Jhonston Bermúdez
– Danny Fardy Jhonston Bermúdez, Commented Dec 2, 2015 at 3:54

Josh Crozier · Accepted Answer · 2015-12-02 03:59:16Z

0

Rather than using the $.map() function, you could use $.each() to iterate over the items in the data.response array and append an option element on each iteration:

Example Here

$.each(data.response, function (_, item) {
  $('<option></option>').val(item.code).text(item.name).appendTo('#Cities');
});

So your success callback would be:

success: function (data) {
  if (data) {
    $.each(data.response, function (_, item) {
      $('<option></option>').val(item.code).text(item.name).appendTo('#Cities');
    });
  } else {
    // no result
  }
}

answered Dec 2, 2015 at 3:59

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

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

3 Comments

Nevi Over a year ago

i think the code works but i tried pasting the whole code to jsfiddle including ajax call it does not fill the cities i checked telerik fiddler the json is still downloading, its big and then after seconds its finished but the dropdown is empty.

Nevi Over a year ago

edit: i got an error Uncaught SyntaxError: Unexpected token :

Josh Crozier Over a year ago

@Nevi That's odd, because it works in this example here - jsfiddle.net/a4mg9ds9 .. I'm not sure what the issue is without looking at all the code.

AirLabs · Accepted Answer · 2016-04-01 10:44:49Z

0

you can do like this:

http://iatacodes.org/api/v4/cities.jsonp?api_key=YOUR-API-KEY&callback=yourJSMethodName

just add .jsonp and &callback=yourJSMethodName

answered Apr 1, 2016 at 10:44

AirLabs

12 bronze badges

Collectives™ on Stack Overflow

Fill dropdown with json data

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related