ICE 11 Part 1: XML vs JSON

Review the examples of lec11a.xml and lec11b.json.txt taking note of the structures. Try to rewrite the XML example below as JSON (see JSON Examples):

<users>
   <user name="rex" id="1">
      <login>January 31, 2015</login>
      <login>February 1, 2015</login>
      <login>February 10, 2015</login>
   </user>
   <user name="recktell" id="2">
      <login>January 28, 2015</login>
      <login>February 2, 2015</login>
      <login>February 3, 2015</login>
   </user>
   <user name="ivana" id="3">
      <login>January 30, 2015</login>
      <login>February 8, 2015</login>
      <login>February 9, 2015</login>
   </user>
</users>

ICE 11 Part 2: Review jQuery JSON Functions

Investigate further the $.get() and $.getJSON() global jQuery functions, and note that these are just shorthand for the more general $.ajax() function. Also review the $.each() iterator function.

ICE 11 Part 3: jQuery Review

Examine the lec11a.html and lec11b.html files and explore how they work—pay special attention to the following code:

$.get("lec11a.xml",  function (data) {
   $("name", data).each( function(){
     $("<li></li>").html($(this).text()).appendTo("#userList");	
   });
 });

ICE 11 Part 4: Under Development

Rewrite lec11c.html to create a page that uses the lec11c.json.text file to do something interesting with the additional user id and student data. For example, you might put this data into an "id" attribute and a "title" attribute respectively.

ICE 11 Part 5: JSON Feeds

Take a look at the JSON data returned by Flickr in the lec11flickr.html page (view in Firefox or Chrome ). Search the web for other JSON feeds of interest (e.g, 9 Cool Public JSON Feeds) and use jQuery to get data from another feed and apply them to a page.

ICE 11 Part 6: Extending Flickr Page [OPTIONAL]

Extend the lec11flickr.html page to include a way for users to choose how many images to display. Consider input methods (like jQuery sliders or resize handles ) that make use of the asynchronous updating that jQuery provides, rather than a boring old button-click.

When you get done with this exercise, show your Instructor.