Retrieving State Names from Yahoo! with JSONP - Exercise

Contact Us or call 1-877-932-8228
Retrieving State Names from Yahoo! with JSONP - Exercise

Retrieving State Names from Yahoo! with JSONP

Duration: 15 to 25 minutes.

In this exercise, you will put to use the JSONP concepts we reviewed previously, using jQuery to retrieve names of states from a given country.

  1. Visit; choose "geo.states" from the left-side navigation, under "geo";. The Yahoo! developer console gives you the information needed to make a JSONP call to this resource, as well as the structure of the JSON data returned.
    • Note that the example query is 'select * from geo.states where place="United States"' - we'll send along a similar query, with the place name ("United States") entered by the user of our page.
    • Note, too, the schema for the returned data, by selecting "JSON" (rather than "XML") and clicking the "Test" button: the top-level field is query, which contains an object with field results, which contains an object with field place, which is itself an array of results. Each array element is an object with a name field.
  2. Open CORSJSONP/Exercises/jsonp-yahooquery.html; you'll write the code here:
    • Use jQuery to get the value of the #place input field.
    • Complete the body of the jQuery call to $.ajax:
      • Add appropriate name/value parameter pairs for url, jsonp, and dataType; refer back to the earlier example for reference, if needed.
      • Add a success callback, which should iterate over the returned results and append a paragraph with each "state" value to div#Content.
    • Test your work in a browser.
  3. Test your solution in a browser by visiting CORSJSONP/Exercises/jsonp-yahooquery.html


<meta charset="UTF-8">
<title>JSONP - Yahoo! Query Language</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#btn').click(function() {
			var place = $('#place').val();
				url: "",
				jsonp: "callback",
				dataType: "jsonp",
				data: {
					q: "select * from geo.states where place='" + place + "'",
					format: "json"
				success: function(response) {
					$.each(, function(index, element) {
						$('#Content').append('<p>' + element.placeTypeName.content + ': ' + + '</p>');
	<input type="text" id="place" placeholder="place">
	<button id="btn">Go</button>
	<div id="Content"></div>

We get the user-entered place name with the code var place = $('#place').val();

We set the following parameters in our call to $.ajax:

  1. url: "" - the URL to which we'll send the remote request.
  2. jsonp: "callback" - the name of the callback function for our JSONP call.
  3. dataType: "jsonp" - the type of data we expect to be returned.

In the success callback, we first set the contents of div#Content to be empty (.html('')), so that repeated clicks of the button "wipe out" any previous displayed data.

We then iterate (with $.each) over the array of returned results, each time appending a new paragraph to div#Content with the type (element.placeTypeName.content) and name ( of the start or other political entity.