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. Geonames.org offers a wide range of geographical data, returned in both XML and JSON format. Visit http://api.geonames.org/countryInfoJSON?formatted=true&lang=en&country=US&username=webucator&style=full 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 http://api.geonames.org/countryInfoJSON?formatted=true&lang=en&country=XX&username=webucator&style=full, 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

Solution:

CORSJSONP/Solutions/cors-geonames.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CORS - Geonames</title>
<style>
	#ResponseContent {
		width:66%;
		padding:1% 2%;
		background-color:#ccc;
		margin-top:20px;
	}
	h2 {
		margin:0;
		padding:0;
	}
</style>
<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();
			$.ajax({
				type: 'GET',
				url: 'http://api.geonames.org/countryInfoJSON?formatted=true&lang=en&country=' + 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: ' + element.capital + '<br>');
							$('#ResponseContent div').append('Population: ' + element.population + '<br>');
							$('#ResponseContent div').append('</p>');
						});
					} else {
						$('#ResponseContent div').append('<p><em>Country not found</em></p>');
					}
				}
			});
		});
	});
</script>
</head>
<body>
	<input type="text" id="countryabbr" placeholder="US">
	<button id="btn">Fetch Country Info</button>
	<br>
	<div id="ResponseContent">
		<h2>Response Content</h2>
		<div></div>
	</div>
</body>
</html>

Our Ajax calls goes out to

http://api.geonames.org/countryInfoJSON?formatted=true&lang=en&country='+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".

Next