Lecture 15– Notes for Project 2

Introduction

The purpose of these lecture notes is to provide a single source for the material and guidelines you will
need to complete “Project 2.” The material discussed in the notes includes, in the order listed:

 The “ist.rit.edu/api” endpoints you “must” use for “Project 2.”

 A discussion of the “GetData([endpoint])” function which you should use to access the data at
the “api” endpoints.
 Some guidelines on parsing data returned from the api endpoints.
 The jQueryUI widgets you should utilize in “Project 2.” Which widgets you use to display the
data from each api endpoint is up to you.

“IST.RIT.EDU/API” Endpoints for “Project 2”

If you type “ist.rit.edu/api” into your browser address bar, Chrome, FireFox, Edge, …etc, you will be
presented with the following web page, this is a partial screen shot of what is returned:

©RIT 2021 P a g e |1 IST-340 PLG V1.0

 Lecture 15– Notes for Project 2

The web page returned contains two columns:

 “Nodes” – an actual endpoint name that you pass to “ist.rit.edu/api/” to obtain data.
 “Description” – a description of the data returned when the endpoint name from the “Nodes”
column is used.

The endpoint names listed in the “Nodes” column are hyperlinks. Clicking on one opens a new tab on
the web page on which you will find the actual JSON object returned from the api when the node name
is used.

Below is a screen shot of the web page displayed when “DEGREES” is clicked on in the “Nodes” column
in the screen shot on the previous page.

In the above screen shot notice that address bar for the web page, outlined in red, shows the actual
path to the “ist.rit.edu/api/…” endpoint for the requested data. For “DEGREES” it is
“ist.rit.edu/api/degrees/.”

©RIT 2021 P a g e |2 IST-340 PLG V1.0

 Lecture 15– Notes for Project 2

As will be seen in the next section, when using the “GetData(…)” function I provide as a “standard”
access method for obtaining data from the “ist.rit.edu/api/” endpoints it is only necessary to pass to
“GetData(…)” the path name “degrees.”

Because the screenshot of the data returned from the “degrees” endpoint may be difficult to read in the
above screen shot, below is just the portion containing information on the “undergraduate” degrees.
Note – if you pass the endpoint name “/degrees/undergraduate” to “ist.rit.edu/api,” you will get the
output shown below:

Above you have a JSON object with the property name “undergraduate.” The value associated with the
property name “undergraduate” is an array three JSON objects each of which contains the descriptive
data for each of the three undergraduate degree programs.

You will have to create code to parse this JSON object and display its contents in a jQueryUI widget or
one of the “add ins” you choose which is appropriate for presenting the data JSON object on your web
page.

©RIT 2021 P a g e |3 IST-340 PLG V1.0

 Lecture 15– Notes for Project 2

Endpoints You MUST Use

For “Project 2” you must display data from the following “Nodes,” i.e., “endpoints:”

 ABOUT
 DEGREES
 MINORS
 EMPLOYMENT
 PEOPLE – just the faculty
 RESEARCH
 FOOTER – just the “copyright” is required.
 COURSES – pay attention to the “But you will need this!” note on the “ist.rit.edu/api” web
page.
 MAPS – as shown in class, this returns a “map” not JSON; just click on the “MAPS” hyperlink
in the “NODES” column. You will have to provide a “nicely” scaled iframe on you web page
to display the map.

If you wish to add more content to your project, the following endpoints may also be included:

 RESOURCES
 FOOTER – other sub-root nodes in addition to the already required “copyright.”
 CONTACT FORM

Do not include “NEWS.” It is out of date and not a “value add” to your project.

Continued next page.

©RIT 2021 P a g e |4 IST-340 PLG V1.0

 Lecture 15– Notes for Project 2

Getting Data from the IST.RIT.EDU/API Endpoints

PLEASE REMEMBER THAT IF YOU ARE RUNNING THE CODE EXAMPLES “OFF CAMPUS” YOU MUST
FIRST CONNECT TO THE RIT VPN

“Project 2” is intended to combine the JavaScript you have learned with the more recent material on
jQuery, jQueryAJAX and jQueryUI. The focus of this work is the application of asynchronous
programming techniques which are necessary when data is requested from a resource that will take a
“long time” to respond, such as a storage device or a web server. In such cases if we simply issued a
request for data and “waited” for a response the web browser would “freeze” blocking any user
interaction – remember, JavaScript itself is single threaded.

In our course work we initially worked with the browser native “XMLHttpRequest()”object which
enables us to make “asynchronous JavaScript and XML / JSON,” “AJAX,” calls to a web server to send or
retrieve data; the original “AJAX” specification covered only exchanging “XML” with a server thus the
“X” at the end of “AJAX” however, we can now exchange JSON as well.

Using the “XMLHttpRequest()” can be a bit cumbersome as it requires us to track both the “readyState”
and “status” of the request to determine when and if the request completed successfully and returned
data or failed and returned an error.

jQueryAjax, “jqXHR – jQuery XMLHttpRequest,” replaces the browser native XMLHttpRequest object by
wrapping it with a “supersetAPI” providing a level of abstraction which makes working with Http
requests and responses much easier. The jQuery XMLHttpRequest (jqXHR) object is returned by the
$.ajax() function.

It should also be mentioned that AJAX, both in the form of an “XMLHttpRequest()” object and a “jqXHR”
object, returns only the specific data requested with which the browser updates the appropriate portion
of the web page, the entire web page is not reloaded.

In our initial work with the “XMLHttpRequest” object we used “callback” functions to process the data
returned from the webserver. In simple cases “callback” are efficient and easy to work with. However,
in more typical “real world” scenarios we might create a series of async requests each dependent on the
results of the previous request which can lead to what is referred to as “callback hell.” The problems
that arise in such situations were resolved with the introduction of the “Promise” – an object which
represents an operation that has not yet completed but is expected in the future. Please refer to
“Lecture 14” for detailed material on this topic.

With the use of jQueryAjax we have “jQuery Defered Objects” which represent jQuery’s implementation
of the “Promise.”

Over the last several semesters as well as the last several lectures, I have shown several approaches to
using jQueryAjax to retrieve data from the “ist.rit.edu/api” endpoints. Recently I revisited all this code
and developed a simple and straightforward function to retrieve the api endpoints.

Continued next page.

©RIT 2021 P a g e |5 IST-340 PLG V1.0

 Lecture 15– Notes for Project 2

Below is a screenshot of the file “GetData.html” which you will find in the “CodeExamples” folder for
this lecture.

On lines 11, through 20, is defined the function “getData(…)” which is called with one parameter, the
“path” of the “ist.rit.edu/api/” endpoint from which you wish to retrieve data. The format of the
parameter passed to “getData(…)” is:

{path: ‘[endpoint name]’} For example, as shown on line 22, above, if you wished to get all the course
minors from “ist.rit.edu/api/” you would call “getData(…)” as follows:

getData({path: ‘/minors/’})… the leading ‘/ and trailing /’ around minors is required – they are parsed
by the proxy identified on line 14, above of getData(…);

©RIT 2021 P a g e |6 IST-340 PLG V1.0

 Lecture 15– Notes for Project 2

Following the actual invocation of getData(…) on line 22, we have

.done(function(data){

// Your Code To Process Output Goes here

console.log(data)

}).fail (function(jqXHR) {

// Consider using the jQueryUI "Dialog" widget to display errors

$('#content').append(jqXHR.responseText);

});

The “$.ajax(…” call on line 12, of getData(…) creates a “promise” which is returned to the caller on line
22. When the “promise” is completes it is either “fulfilled” or “rejected.” If it has been fulfilled, the
callback wrapped by the “.done” is called. If it has been rejected, the callback wrapped by the “.fail” is
called.

When the promise is fulfilled the information returned from the api endpoint is passed to the callback
function wrapped by the “.done” as the parameter “data” – the data returned by the endpoint.

If the promise has been rejected, the callback function wrapped by the “.fail” uses “jqXHR” to examine
the cause of the failure. The “jqXHR” object is returned by the $.ajax() call in “getData(..).” Among the
properties it exposes is the “responseText” returned by the api endpoint that was called. In the case of
a “fail” condition it will provide us with the text returned by the api describing the cause of the failure.
In the example shown above we simply write the failure message to an html element on our web page.
A more interesting way to display such errors would be to use the jQueryUI “Dialog” widget.

If we run the above code, in the browser Dev Tools “Console” we see:

This is the JSON object returned from the “ist.rit.edu/api/minors” endpoint. In your implementation of
the call to getData(…) you would have code to parse the returned data into an appropriate jQuery UI
widget / plug in.

©RIT 2021 P a g e |7 IST-340 PLG V1.0

 Lecture 15– Notes for Project 2

Just for demonstration purposes, let us change the parameter passed to “getData(..)” on line 22, of the
code to {path: ‘/minor/’} and rerun the code.

We now see the error returned by the api endpoint displayed on our web page:

I leave it to you as an exercise to display the error message in the jQueryUI “Dialog” widget – good
practice for “Project 2.”

Continued next page.

©RIT 2021 P a g e |8 IST-340 PLG V1.0

 Lecture 15– Notes for Project 2

Some Guidelines for Parsing API Endpoint Data

If we modify our “getData(…)” function in the “GetData.html” file to retrieve all of the department’s
faculty members, the call to “getData(…)” would look like:

We will see the following output in the “Console:”

This is a partial screenshot of the output. The first element of the returned “faculty” array is expanded.

So, we have a JSON object with the property “faculty” which has as its value an array of 34, JSON objects
each of which has the same set of properties to describe a faculty member. The first element in the
array contains the information for “Garret Arcoraci.” How do we approach parsing all of this so we can
display it in a jQueryUI Widget / plug-in?

As shown in the “GetData.html” file, whatever code we create to parse the returned data would start on
line 25. The returned data shown above should be familiar – it has the same form as the “choiceData”
file we had in “Project 1.” So, the way we get to “what’s inside” is to iterate over it. However, we are
now using jQuery so let us make use of the jQuery “$.each([array], [callback])” method – see
https://api.jquery.com/jquery.each/

©RIT 2021 P a g e |9 IST-340 PLG V1.0

 Lecture 15– Notes for Project 2

The code we will continue with is “GetDataFaculty.html” in the “CodeExamples” folder.

In our “.done” callback we are passed “data” which contains the data returned by the $.ajax call in
getData(…) . Let us write “data.faculty” to the console as a starting point.

Below is a partial screen shot of “data.faculty.” You can see that it is an array of 34, “faculty objects.”

©RIT 2021 P a g e | 10 IST-340 PLG V1.0

 Lecture 15– Notes for Project 2

Just as we did with “choiceData” we will iterate over this array but now we will use “$.each([array],
[callback]).”

When used to iterate over an array the callback for '$.each(...' is passed an array index and a
corresponding array value each on each iteration. It is important to realize that the “array value” which
will be passed to the call back is the JSON object at the index i. Because of this to write something
meaningful to the console, as well as “get” something meaningful to work with in our code, we need to
specify a property or a collection of properties for “item.” To see how this works and to keep it simple,
we will just pick one property of “item.” Add the following code to lines 26, through 28, of
“GetFaculty.html;” – see “GetDataFaculty1.html” in the “CodeExamples” folder.

When we run it, we see the following in the “Console,” partial screen shot:

Now we will extend the code to create an “unordered list” of the faculty members. Delete the code on
lines 26, through 28 and add the following in its place; – see “GetDataFaculty2.html” in the
“CodeExamples” folder.

Continued next page.

©RIT 2021 P a g e | 11 IST-340 PLG V1.0

 Lecture 15– Notes for Project 2

We first create an “unordered list” with the id “facultyUL” and append it to the <div> element with the
id “content. Then in our $.each(data.faculty,function(i, item){…} callback function we create <li>
elements consisting of the string “Name: “ to which we append the name of the next faculty member in
the “data.faculty” array. Notice that although the index “i” is a parameter passed to the callback
function we are not using it. Like any parameter passed to a
function, we have no obligation to utilize it.

The output from the above code is shown to the left.

This is a very simple example of iterating over data returned

from an api endpoint and using it to create an html element,
in this case an unordered list.

What is important to understand is that the consumption of

data returned from an api endpoint will generally begin with
a “$.each(…)” loop. You may have code to create html
elements before your first “$.each(…)” loop that will be
referenced by the “$.each(…)” loop and you may have other
“$.each(…)” loops nested within your first “$.each(…)” loop.

The point is that the “$.each(…)” loop is the code pattern

used for parsing through all the returned api endpoint data.

On the next page is the code we just used with some extra
blank lines and comments to better separate out and
explain the code with comments; – see
“GetDataFaculty3.html” in the “CodeExamples” folder.

©RIT 2021 P a g e | 12 IST-340 PLG V1.0

 Lecture 15– Notes for Project 2

The above code can be appropriately modified to fill in any jQueryUI widget or plug in. It is just mapping
endpoint data to html elements.

Continued next page.

©RIT 2021 P a g e | 13 IST-340 PLG V1.0

 Lecture 15– Notes for Project 2

Recommended jQueryUI Widgets for Project 2

The jQueryUI project provides an excellent reference web page at https://jqueryui.com/

You will find everything you need to work with the available “Widgets:” high level descriptions with a
simple example as well as the full API documentation for each “widget.” The API documentation has
detailed descriptions, with examples, for each “option,” “method,” and “event” available for a widget.

As an example, if we go to https://jqueryui.com we are presented with the following web page, partial
screen shot.

The portion of the web

page highlighted by the
“red” rectangle is the full
set of jQuery UI widgets.
Clicking on any one of
them will bring you to a
web page where you are
presented with an
overview of the widget.

Let us click on
“Accordion.”

Continued next page.

©RIT 2021 P a g e | 14 IST-340 PLG V1.0

 Lecture 15– Notes for Project 2

This is the web page we are presented with when we click on “Accordion” on the web page shown on
the previous page.

The page shows a working example of the “Accordion” jQueryUI widget. If you click on a section other
than “Section 1,” the “Accordion” will change its display:

©RIT 2021 P a g e | 15 IST-340 PLG V1.0

 Lecture 15– Notes for Project 2

Besides being able to interact with the “Accordion” there are two hyperlinks of interest on the page:

 “view source” clicking here will display on the web page the source code which creates the
“Accordion” being displayed; a screen shot of the source is not shown due to space limitations.

 “API documentation” clicking here will take you to a new web page where you will find
“everything you would ever want to know about the Accordion.” A screen shot of the start of
this exceptionally large web page appears below.

©RIT 2021 P a g e | 16 IST-340 PLG V1.0

 Lecture 15– Notes for Project 2

Now that you have an overview of how to find the information needed to create and use the jQueryUI
“widgets,” we will look at setting up a basic web page to include and use the widgets. For our example
we will use the “Dialog” “widget” and the html file “GetDataFacultyMsg1.html” from the
“jQueryUICodeExamples1” folder – the html file is the code we just used to generate an unordered list
of “faculty members” with some additions for jQueryUI.

At the beginning of the “GetDataFacultyMsg1.html” file we have added two additional lines of code on
lines 7, and 8:

On line 7, we have a reference to the “stylesheet” to be used for all of jQueryUI widgets we will use on
our web page. The “href” contains a link to the “theme” to be used for the widgets, in this case:

and the style sheet to be used for all of the jQueryUI widgets on the page:

The theme that we are using is one of 8, themes which are provided for you to choose from. In the
folder “jQueryUICodeExamples1” you will find the folders containing each of the themes:

Continued next page.

©RIT 2021 P a g e | 17 IST-340 PLG V1.0

 Lecture 15– Notes for Project 2

For a detailed description of using them and an example of each theme using the jQueryUI “Datepicker”
widget as a model, see the MS Word document “Lecture16RevisedjQueryThemes.docx” included with
the material for this lecture.

On line 8, of the code we have the statement:

This statement loads the code for “jQueryUI” just as on line 6, we load the code for “jQuery.” The
“.min” indicates that we are loading a “minified” version of the code, i.e. a version of the code with no
white spaces for storage saving purposes.

Both the jQueryUI style sheet, “jquery-ui-min.css,” and the jQueryUI code, “jquery-ui.min.js,” are
included in the folder “jQueryUICodeExamples1:”

When you create your web page for “Project 2” you will need to include the following files in your
project code and reference them appropriately on your “index.html” page:

 The folder for the jQueryUI theme you have chosen.

 The two files:
o jquery-ui.min.css
o jquery-ui.min.js

Starting with the “GetDataFaculty1.html” file we will create a web page that will display the information
for a faculty member in the unordered list we create on the web page when the faculty member’s name
is clicked on in the unordered list.

Let us rerun the “GetDataFaculty1.html” file, this is a partial screen shot of the output:

Continued next page.

©RIT 2021 P a g e | 18 IST-340 PLG V1.0

 Lecture 15– Notes for Project 2

The first thing we want to do is add an “event listener” to the unordered list so that when a faculty
member’s name is “clicked” on we can get the name. To do this we use a bit of jQuery selector “magic.”

At line 32, of “GetDataFacultyMsg1.html” add the following code:

On line 33, we use the jQuery select $(“#facultyUL li”). This selector has two parts:

 the first references the html element with the id “facultyUL” which is the id of the unordered list
in which we display the names of the faculty members.
 the second part references all “li” html elements

Together the selector will provide a reference to all the <li> elements in the unordered list used to
display the faculty member names. We assign to that selector an event listener for the “click” event.
The callback for the event assigns the value of $(this).text() to the variable liText.

$(this) is the context of the html element triggering the click event, i.e., the specific <li> which was
clicked. When we created the <li> element for the unordered list, line 29, we left a space between the
<li> and the string “Name:.” Because of this “liText” actually starts with a blank character not the “N” at
the start of “Name: “ As such to get the faculty member name we have to start our “slice” at index 7.

If we run the above code just to make sure clicking on a faculty member name in the unordered list
produces our expected result, we will see that it does work:

For now, you will have to take my word for it that I clicked on
the faculty member names in the unordered list as they are
shown in the “Console” output.

Continued next page.

©RIT 2021 P a g e | 19 IST-340 PLG V1.0

 Lecture 15– Notes for Project 2

We now have an event listener added to our code which will “extract” the name of the faculty member
we clicked on in the unordered list and write it to the console. Now, rather than write it to the console
let us use the selected faculty member name to create and display a jQuery “dialog” widget showing a
picture of the faculty member and some additional information.

First, let us create and add a jQuery “dialog” widget to the web page. As you will see when you start
working with jQuery “widgets” they all have in common:

 an html element to which they are “anchored” on the web page – the html element at which
they are displayed.
 the actual definition of the “widget” – this is done in the <script> block on your web page. The
properties and methods used to create a “widget” definition can be found in the “Api
documentation” hyperlink for each widget in the ‘jQueryUI” web pages, see page 15 of this
document.

We will add our new code to create and “anchor” the dialog widget on lines 68, through 82, in our script
block and we will anchor to a <div> element on line 90. See the code below:

On line 90, we have created a <div>

and assigned it an id of “dialog.”

On line 68, in our <script> block we

use the jQuery selector $(“#dialog”)
to “anchor” the “dialog” widget to
the <div> on line 90. The “.dialog”
following the jQuery selector says
that we are creating a jQueryUI
“dialog” widget.

I leave it to you to work through the

“API documentation” for the
“dialog” widget to understand what
is going on in the “dialog” widget
definition.

The “body” of the “dialog” widget is created by adding html code to it. Any valid html code will work.
The approach I will show you is one of the simplest I’ve found: we just create a single JavaScript variable,
and keep adding both strings and JavaScript variables to it.

Continued next page.

©RIT 2021 P a g e | 20 IST-340 PLG V1.0

 Lecture 15– Notes for Project 2

On lines 38, through58, I have added code to the “click” event listener to display a “dialog” widget with
a picture of and information about the faculty member whose name is clicked on in the unordered list of
faculty members.

You will note that on line 40, I am iterating through the 34-element array of faculty JSON objects with a
“for” loop rather than a “$.each(…” Think about why I am using this approach.

As I loop through the 34-element array of faculty JSON objects I am looking for the faculty member
whose name is equal to the name clicked on in the unordered list of faculty members. When I find a
match, I create the variable “divContent,” line 44, and set it to “<div><ul>” I am starting the creation of
the html content that will be used to create the body of the “dialog” widget. The body will start out
with a <div> element which will contain a <ul> element.

On lines 46, through 51, I construct the rest of the html. It is all easy to follow. Notice the creation of
the <img> tag on line 51.

On line 53, I “add” the “html” content I just created to the <div> I am “anchoring” my “dialog” widget to.

On lines 54, and 55, I add some options and actions to the “dialog” widget – again, refer to the “API
documentation.”

Now that I am all finished constructing my “dialog” widget I no longer have to continuing iterating over
“data.faculty” so I issue a “break” – you can’t do that with a “$.each(…” to answer my earlier question.

Continued next page.

©RIT 2021 P a g e | 21 IST-340 PLG V1.0

 Lecture 15– Notes for Project 2

If we run the above code and click on a faculty member name in the unordered list of faculty members,
we will see:

Hopefully, this all will be of help as you develop your “Project 2.” Once you “get the hang” of parsing
the api endpoint data and mapping it to widgets it becomes a simple task.

Continued next page.

©RIT 2021 P a g e | 22 IST-340 PLG V1.0

 Lecture 15– Notes for Project 2

What jQuery Plugins Should You Use?

Once you review the widgets shown on the jQueryUI web pages you are free to choose any you think
will be of use. The ones I encourage you to use because they lend themselves to the project are:

 Accordion
 Dialog – excellent for displaying endpoint api data as we just did as well as displaying any sort of
message you want the user to be aware.
 Tabs
 Menu
 Selectmenu
 Tooltip

Again, these are suggestions not requirements.

You are also required to use three jQuery plugins in addition to the widgets. Below are the contents of
slide 4, from the “original” “Lecture 16.”

 Very useful for the project:

o jsGrid - http://js-grid.com/ “Lightweight Grid jQuery Plugin”
o Chart.js - https://www.chartjs.org/ “Simple yet flexible JavaScript charting for designers
and developers
 You should do some searching on the web for useful jQuery plugins but you can start with the
following websites. Again, make sure a plugin that you pick has meaning for the data you are
displaying with it.
o The Best jQuery Plugins & Effects Thar Are Still Useful in 2019
o The 50 Most Useful jQuery Plugins for Frontend Development
o 22 Brilliant jQuery Plugins

©RIT 2021 P a g e | 23 IST-340 PLG V1.0