Retrieving Country Info from GeoNames via CORS - Exercise

Contact Us or call 1-877-932-8228
Retrieving Country Info from GeoNames via CORS - Exercise

Retrieving Country Info from GeoNames via CORS

Duration: 15 to 25 minutes.

In this exercise, you will make an Ajax call to cross-origin site which includes appropriate response headers to enable CORS.

  1. offers a wide range of geographical data, returned in both XML and JSON format. Visit to view the response from the resource we will access.
  2. Note that the response includes the Access-Control-Allow-Origin: * header: Country Info
  3. Note, too, the schema of the response: a field geonames contains an array (n this case with a single element) which contains fields with information about the given country: countryName, population, etc.
  4. Open CORSJSONP/Exercises/cors-geonames.html in your editor; you'll write the code here:
    • Use jQuery to get the value of the #countryabbr input field: this is the two-character country abbreviation - "US" for the United States, "CN" for China, "DE" for Germany, etc.
    • Complete the body of the jQuery call to $.ajax:
      • The type of this Ajax call should be get.
      • The call should go to, where "XX" is the two-character country abbreviation supplied by the user.
      • In the success callback, check if the country code was valid by checking the length of the returned response; if there was a response with valid data, then display on the page the country's name, population, and any other fields you wish. If not - that is, if response.geonames.length == 0, then display an error message.
  5. Test your solution in a browser by visiting CORSJSONP/Exercises/cors-geonames.html


<meta charset="UTF-8">
<title>CORS - Geonames</title>
	#ResponseContent {
		padding:1% 2%;
	h2 {
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#btn').click(function() {
			$('#ResponseContent h2').html('Response Content');
			$('#ResponseContent div').html('');
			var country = $('#countryabbr').val();
				type: 'GET',
				url: '' + country + '&username=webucator&style=full',
				success: function(response) {
					if (response.geonames.length > 0) {
						$.each(response.geonames, function(index, element) {
							$('#ResponseContent div').append('<p>');
							$('#ResponseContent div').append('Name: ' + element.countryName + '<br>');
							$('#ResponseContent div').append('Currency Code: ' + element.currencyCode + '<br>');
							$('#ResponseContent div').append('Capital City: ' + + '<br>');
							$('#ResponseContent div').append('Population: ' + element.population + '<br>');
							$('#ResponseContent div').append('</p>');
					} else {
						$('#ResponseContent div').append('<p><em>Country not found</em></p>');
	<input type="text" id="countryabbr" placeholder="US">
	<button id="btn">Fetch Country Info</button>
	<div id="ResponseContent">
		<h2>Response Content</h2>

Our Ajax calls goes out to'+country+'&username=webucator&style=full'

where country is the user-entered value from the text field.

We check that the country code we send along in our Ajax call results in a valid response; if so, then we process the response by iterating, using jQuery's $.each method, over the response array response.geonames, appending to $('#ResponseContent div') some information about the country. If the response is empty, then we display "Country not found".