ICT-4570 Homework 6


This exercise allows you to experience AJAX using JavaScript. In it you will asynchronously access a JSON resource, parse the return, and filter and display data as a table.

What to Hand In

Canvas submission instructions:
Please combine multiple files into a single "zip" archive, and save it in a location that you will remember. When you are ready to submit the assignment solution, open the assignment in Canvas, and click on the Submit for Evaluation button at the top, attach the file, and click Submit for Evaluation at the bottom.


  1. Retrieve the JSON resources at the provided URL, extract the ones that match the criteria provided, and display them as a table on your web page.
    1. Create a basic web page from the course template (which we have been using all along), and external JavaScript and CSS files
    2. Add an input to the page which will be used to match the President's name.
    3. Add an output element on the page suitable for receiving the table result you will build.
    4. Examine the data source at The structure will be needed to understand how to extract data from it later.
    5. Set up a XMLHttpRequest in a method to retrieve this resource
    6. Set the timeout on the request for 30 seconds (30000 ms). This should be sufficient time to retrieve the resource, and will give you an indication of a typo or other problem in doing so.
    7. Create a function to handle the data once it comes back in the asynchronous request.
    8. Ensure the function does the following, using other functions as appropriate:
      1. Parse the result using JSON.parse and assigning it to a local variable.
      2. The function should create a table with the number, name, birthday, entered office, and left office headers
      3. The function should add all President information which passes the filter to the table. If the filter is blank or can't be interpreted, show all the Presidents.
  2. Stretch goal: Create inputs for number, name, and birthday, and filter on each, as above.
  3. Stretch goal: Build a "subtable" of vice-presidents in a cell on each displayed President's row. Give it a heading of vice president, and include the vice president name (or names) for the subtable rows.



Criteria Weight
Basic HTML5 template HTML file with suitable content 15%
Basic HTML5 template CSS file with suitable content 15%
XMLHttpRequest set up properly 15%
XMLHttpRequest response handler set up properly 15%
Table elements built properly 15%
Proper elements are displayed after a query 10%
Screen output provided 15%
Stretch goal: Multiple filters +10%
Stretch goal: Vice Presidents +10%