Populating select using ajax json array

Question

I have an application which needs to be integrated with SagePay (payment gateway).

There is a list of countries in ISO-3166-1 format here which I want to add.

The list appears to be json data inside an array called countries:

countries = [
    {code: "GB", name: "United Kingdom"},
    {code: "AF", name: "Afghanistan"},
    {code: "AX", name: "Aland Islands"},
    // ...
];

I have a select element with the ID country:

<select id="country"></select>

I have tried using ajax as follows to add these items to my select element on page load:

$.ajax({
    url: '/js/countrycodes.js',
    type: 'POST',
    dataType: 'json',
    success: function( json ) {
        $.each(json, function(i, value) {
            $('#country').append($('<option>').text(code).attr('value', name));
        });
    }
});

This doesn't seem to do anything. If I console.log(json) in the success callback it doesn't produce anything.

I realise one issue is that the json data is inside an array, countries, but not sure how to parse this.

I've checked to make sure I'm getting a HTTP 200 on /js/countrycodes.js and this is accessible, as are the other files such as jQuery.

Edit

This is the output if I run some of the suggested answers in my console:

        {readyState: 1, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}
        abort
        :
        ƒ (a)
        always
        :
        ƒ ()
        complete
        :
        ƒ ()
        done
        :
        ƒ ()
        error
        :
        ƒ ()
        fail
        :
        ƒ ()
        getAllResponseHeaders
        :
        ƒ ()
        getResponseHeader
        :
        ƒ (a)
        overrideMimeType
        :
        ƒ (a)
        pipe
        :
        ƒ ()
        progress
        :
        ƒ ()
        promise
        :
        ƒ (a)
        readyState
        :
        4
        responseText
        :
        "countries = [↵{code: "GB", name: "United Kingdom"},↵{code: "AF", name: "Afghanistan"},↵{code: "AX", name: "Aland Islands"},↵{code: "AL", name: "Albania"},↵{code: "DZ", name: "Algeria"},↵{code: "AS", name: "American Samoa"},↵{code: "AD", name: "Andorra"},↵{code: "AO", name: "Angola"},↵{code: "AI", name: "Anguilla"},↵{code: "AQ", name: "Antarctica"},↵{code: "AG", name: "Antigua and Barbuda"},↵{code: "AR", name: "Argentina"},↵{code: "AM", name: "Armenia"},↵{code: "AW", name: "Aruba"},↵{code: "AU", name: "Australia"},↵{code: "AT", name: "Austria"},↵{code: "AZ", name: "Azerbaijan"},↵{code: "BS", name: "Bahamas"},↵{code: "BH", name: "Bahrain"},↵{code: "BD", name: "Bangladesh"},↵{code: "BB", name: "Barbados"},↵{code: "BY", name: "Belarus"},↵{code: "BE", name: "Belgium"},↵{code: "BZ", name: "Belize"},↵{code: "BJ", name: "Benin"},↵{code: "BM", name: "Bermuda"},↵{code: "BT", name: "Bhutan"},↵{code: "BO", name: "Bolivia"},↵{code: "BA", name: "Bosnia and Herzegovina"},↵{code: "BW", name: "Botswana"},↵{code: "BV", name: "Bouvet Island"},↵{code: "BR", name: "Brazil"},↵{code: "IO", name: "British Indian Ocean Territory"},↵{code: "BN", name: "Brunei Darussalam"},↵{code: "BG", name: "Bulgaria"},↵{code: "BF", name: "Burkina Faso"},↵{code: "BI", name: "Burundi"},↵{code: "KH", name: "Cambodia"},↵{code: "CM", name: "Cameroon"},↵{code: "CA", name: "Canada"},↵{code: "CV", name: "Cape Verde"},↵{code: "KY", name: "Cayman Islands"},↵{code: "CF", name: "Central African Republic"},↵{code: "TD", name: "Chad"},↵{code: "CL", name: "Chile"},↵{code: "CN", name: "China"},↵{code: "CX", name: "Christmas Island"},↵{code: "CC", name: "Cocos (Keeling) Islands"},↵{code: "CO", name: "Colombia"},↵{code: "KM", name: "Comoros"},↵{code: "CG", name: "Congo"},↵{code: "CD", name: "Congo, The Democratic Republic of the"},↵{code: "CK", name: "Cook Islands"},↵{code: "CR", name: "Costa Rica"},↵{code: "CI", name: "Côte d'Ivoire"},↵{code: "HR", name: "Croatia"},↵{code: "CU", name: "Cuba"},↵{code: "CY", name: "Cyprus"},↵{code: "CZ", name: "Czech Republic"},↵{code: "DK", name: "Denmark"},↵{code: "DJ", name: "Djibouti"},↵{code: "DM", name: "Dominica"},↵{code: "DO", name: "Dominican Republic"},↵{code: "EC", name: "Ecuador"},↵{code: "EG", name: "Egypt"},↵{code: "SV", name: "El Salvador"},↵{code: "GQ", name: "Equatorial Guinea"},↵{code: "ER", name: "Eritrea"},↵{code: "EE", name: "Estonia"},↵{code: "ET", name: "Ethiopia"},↵{code: "FK", name: "Falkland Islands (Malvinas)"},↵{code: "FO", name: "Faroe Islands"},↵{code: "FJ", name: "Fiji"},↵{code: "FI", name: "Finland"},↵{code: "FR", name: "France"},↵{code: "GF", name: "French Guiana"},↵{code: "PF", name: "French Polynesia"},↵{code: "TF", name: "French Southern Territories"},↵{code: "GA", name: "Gabon"},↵{code: "GM", name: "Gambia"},↵{code: "GE", name: "Georgia"},↵{code: "DE", name: "Germany"},↵{code: "GH", name: "Ghana"},↵{code: "GI", name: "Gibraltar"},↵{code: "GR", name: "Greece"},↵{code: "GL", name: "Greenland"},↵{code: "GD", name: "Grenada"},↵{code: "GP", name: "Guadeloupe"},↵{code: "GU", name: "Guam"},↵{code: "GT", name: "Guatemala"},↵{code: "GG", name: "Guernsey"},↵{code: "GN", name: "Guinea"},↵{code: "GW", name: "Guinea-Bissau"},↵{code: "GY", name: "Guyana"},↵{code: "HT", name: "Haiti"},↵{code: "HM", name: "Heard Island and McDonald Islands"},↵{code: "VA", name: "Holy See (Vatican City State)"},↵{code: "HN", name: "Honduras"},↵{code: "HK", name: "Hong Kong"},↵{code: "HU", name: "Hungary"},↵{code: "IS", name: "Iceland"},↵{code: "IN", name: "India"},↵{code: "ID", name: "Indonesia"},↵{code: "IR", name: "Iran, Islamic Republic of"},↵{code: "IQ", name: "Iraq"},↵{code: "IE", name: "Ireland"},↵{code: "IM", name: "Isle of Man"},↵{code: "IL", name: "Israel"},↵{code: "IT", name: "Italy"},↵{code: "JM", name: "Jamaica"},↵{code: "JP", name: "Japan"},↵{code: "JE", name: "Jersey"},↵{code: "JO", name: "Jordan"},↵{code: "KZ", name: "Kazakhstan"},↵{code: "KE", name: "Kenya"},↵{code: "KI", name: "Kiribati"},↵{code: "KP", name: "Korea, Democratic People's Republic of"},↵{code: "KR", name: "Korea, Republic of"},↵{code: "KW", name: "Kuwait"},↵{code: "KG", name: "Kyrgyzstan"},↵{code: "LA", name: "Lao People's Democratic Republic"},↵{code: "LV", name: "Latvia"},↵{code: "LB", name: "Lebanon"},↵{code: "LS", name: "Lesotho"},↵{code: "LR", name: "Liberia"},↵{code: "LY", name: "Libyan Arab Jamahiriya"},↵{code: "LI", name: "Liechtenstein"},↵{code: "LT", name: "Lithuania"},↵{code: "LU", name: "Luxembourg"},↵{code: "MO", name: "Macao"},↵{code: "MK", name: "Macedonia, The Former Yugoslav Republic of"},↵{code: "MG", name: "Madagascar"},↵{code: "MW", name: "Malawi"},↵{code: "MY", name: "Malaysia"},↵{code: "MV", name: "Maldives"},↵{code: "ML", name: "Mali"},↵{code: "MT", name: "Malta"},↵{code: "MH", name: "Marshall Islands"},↵{code: "MQ", name: "Martinique"},↵{code: "MR", name: "Mauritania"},↵{code: "MU", name: "Mauritius"},↵{code: "YT", name: "Mayotte"},↵{code: "MX", name: "Mexico"},↵{code: "FM", name: "Micronesia, Federated States of"},↵{code: "MD", name: "Moldova"},↵{code: "MC", name: "Monaco"},↵{code: "MN", name: "Mongolia"},↵{code: "ME", name: "Montenegro"},↵{code: "MS", name: "Montserrat"},↵{code: "MA", name: "Morocco"},↵{code: "MZ", name: "Mozambique"},↵{code: "MM", name: "Myanmar"},↵{code: "NA", name: "Namibia"},↵{code: "NR", name: "Nauru"},↵{code: "NP", name: "Nepal"},↵{code: "NL", name: "Netherlands"},↵{code: "AN", name: "Netherlands Antilles"},↵{code: "NC", name: "New Caledonia"},↵{code: "NZ", name: "New Zealand"},↵{code: "NI", name: "Nicaragua"},↵{code: "NE", name: "Niger"},↵{code: "NG", name: "Nigeria"},↵{code: "NU", name: "Niue"},↵{code: "NF", name: "Norfolk Island"},↵{code: "MP", name: "Northern Mariana Islands"},↵{code: "NO", name: "Norway"},↵{code: "OM", name: "Oman"},↵{code: "PK", name: "Pakistan"},↵{code: "PW", name: "Palau"},↵{code: "PS", name: "Palestinian Territory, Occupied"},↵{code: "PA", name: "Panama"},↵{code: "PG", name: "Papua New Guinea"},↵{code: "PY", name: "Paraguay"},↵{code: "PE", name: "Peru"},↵{code: "PH", name: "Philippines"},↵{code: "PN", name: "Pitcairn"},↵{code: "PL", name: "Poland"},↵{code: "PT", name: "Portugal"},↵{code: "PR", name: "Puerto Rico"},↵{code: "QA", name: "Qatar"},↵{code: "RE", name: "Réunion"},↵{code: "RO", name: "Romania"},↵{code: "RU", name: "Russian Federation"},↵{code: "RW", name: "Rwanda"},↵{code: "BL", name: "Saint Barthélemy"},↵{code: "SH", name: "Saint Helena"},↵{code: "KN", name: "Saint Kitts and Nevis"},↵{code: "LC", name: "Saint Lucia"},↵{code: "MF", name: "Saint Martin"},↵{code: "PM", name: "Saint Pierre and Miquelon"},↵{code: "VC", name: "Saint Vincent and the Grenadines"},↵{code: "WS", name: "Samoa"},↵{code: "SM", name: "San Marino"},↵{code: "ST", name: "Sao Tome and Principe"},↵{code: "SA", name: "Saudi Arabia"},↵{code: "SN", name: "Senegal"},↵{code: "RS", name: "Serbia"},↵{code: "SC", name: "Seychelles"},↵{code: "SL", name: "Sierra Leone"},↵{code: "SG", name: "Singapore"},↵{code: "SK", name: "Slovakia"},↵{code: "SI", name: "Slovenia"},↵{code: "SB", name: "Solomon Islands"},↵{code: "SO", name: "Somalia"},↵{code: "ZA", name: "South Africa"},↵{code: "GS", name: "South Georgia and the South Sandwich Islands"},↵{code: "ES", name: "Spain"},↵{code: "LK", name: "Sri Lanka"},↵{code: "SD", name: "Sudan"},↵{code: "SR", name: "Suriname"},↵{code: "SJ", name: "Svalbard and Jan Mayen"},↵{code: "SZ", name: "Swaziland"},↵{code: "SE", name: "Sweden"},↵{code: "CH", name: "Switzerland"},↵{code: "SY", name: "Syrian Arab Republic"},↵{code: "TW", name: "Taiwan, Province of China"},↵{code: "TJ", name: "Tajikistan"},↵{code: "TZ", name: "Tanzania, United Republic of"},↵{code: "TH", name: "Thailand"},↵{code: "TL", name: "Timor-Leste"},↵{code: "TG", name: "Togo"},↵{code: "TK", name: "Tokelau"},↵{code: "TO", name: "Tonga"},↵{code: "TT", name: "Trinidad and Tobago"},↵{code: "TN", name: "Tunisia"},↵{code: "TR", name: "Turkey"},↵{code: "TM", name: "Turkmenistan"},↵{code: "TC", name: "Turks and Caicos Islands"},↵{code: "TV", name: "Tuvalu"},↵{code: "UG", name: "Uganda"},↵{code: "UA", name: "Ukraine"},↵{code: "AE", name: "United Arab Emirates"},↵{code: "GB", name: "United Kingdom"},↵{code: "US", name: "United States"},↵{code: "UM", name: "United States Minor Outlying Islands"},↵{code: "UY", name: "Uruguay"},↵{code: "UZ", name: "Uzbekistan"},↵{code: "VU", name: "Vanuatu"},↵{code: "VE", name: "Venezuela"},↵{code: "VN", name: "Viet Nam"},↵{code: "VG", name: "Virgin Islands, British"},↵{code: "VI", name: "Virgin Islands, U.S."},↵{code: "WF", name: "Wallis and Futuna"},↵{code: "EH", name: "Western Sahara"},↵{code: "YE", name: "Yemen"},↵{code: "ZM", name: "Zambia"},↵{code: "ZW", name: "Zimbabwe"}↵];"
        setRequestHeader
        :
        ƒ (a,b)
        state
        :
        ƒ ()
        status
        :
        200
        statusCode
        :
        ƒ (a)
        statusText
        :
        "OK"
        success
        :
        ƒ ()
        then
        :
        ƒ ()
        __proto__
        :
        Object

Andy do you have any error in your browser console with your original code? — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Aug 21, 2017 at 11:17
@AlivetoDie No. I've posted what I get even when I run some of the suggested answers in my Console. I can see the data in responseText but it won't update my select. — Andy
– Andy, Commented Aug 21, 2017 at 11:21

ADyson · Accepted Answer · 2017-08-21 11:17:51Z

1

$.ajax({
    url: '/js/countrycodes.js',
    type: 'POST',
    dataType: 'json',
    success: function( json ) {
        $.each(json, function(i, value) {
            $('#country').append($('<option>').text(value.code).attr('value', value.name));
        });
    }
});

should fix it. You simply missed value. to reference the properties within the current object in the loop. In your version code and name haven't come from anywhere. They don't acquire their values automatically, instead they are properties of value.

answered Aug 21, 2017 at 11:17

ADyson

62.9k16 gold badges86 silver badges100 bronze badges

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

7 Comments

Andy Over a year ago

Ok. Something strange is going on because it just does nothing. Even if I run it directly in the Console I get {readyState: 1, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …} and can see the responseText with the data in it. But it just won't populate the select at all. I've checked the ID (#country) is spelt right and that in my code it's inside document.ready. What else could it be, or how else can I debug this?

ADyson Over a year ago

what command produces that output exactly? What does doing console.log(JSON.stringify(json)); at the start of the "success" function produce?

Andy Over a year ago

It doesn't produce anything. Tried in Chrome 60.0.3112.101 and Firefox 54.0.1. jQuery version is 1.12.3 and is loaded correctly (HTTP 200).

ADyson Over a year ago

can you try changing from POST to GET? Doesn't make much sense to POST to a static file from which you want to retrieve (get) information. Also, I just noticed that responseText contains actual Javascript, not JSON. i.e. the file contains code not data. It should just start immediately with [{ code... etc, not with countries = - ajax can't interpret that as JSON, it's not valid. Of course, since this is a static list, you could just include countries.js into your script in the normal way and just create the<select> options from it directly, and remove the ajax part entirely

ADyson Over a year ago

there doesn't seem much point retrieving this via delayed ajax request when the list doesn't change, and you've got the info in a .js file already. You could just do it at page load very simply.

|

ADyson · Accepted Answer · 2017-08-21 13:13:09Z

-1

Here's an alternative: since your country list is static and contained in a .js file which declares it as a variable, it can just be included in your page in the normal way, without the need for ajax:

<select id="country"></select>
<script type="javascript" language="text/javascript" src="/js/countrycodes.js"></script>
<script>
//use the countries variable which was declared in the countrycodes script file.
$.each(countries, function(i, value) {
  $('#country').append($('<option>').text(value.code).attr('value', value.name));
});
</script>

edited Aug 21, 2017 at 13:13

answered Aug 21, 2017 at 12:24

ADyson

62.9k16 gold badges86 silver badges100 bronze badges

3 Comments

Andy Over a year ago

Uncaught ReferenceError: countries is not defined. I'll look into it. Something very very weird is happening with this today!

ADyson Over a year ago

certainly is. It works fine in my sandbox. Are you sure countrycodes.js is loading correctly?

Andy Over a year ago

It's working now. I've no idea what's happened - possibly some weird caching issue as I'm using ExpressionEngine. I've created a fiddle to test it and it works fine. Made a slight amendment to get the country name value.name as the option text: jsfiddle.net/eb8ydh4n. Thanks.

Collectives™ on Stack Overflow

Populating select using ajax json array

Edit

2 Answers 2

7 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Edit

2 Answers 2

7 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related