Skip to content

Lab 3: Structured Data

Due: Monday, Feb 10th

In this lab, you will work with provided structured data to generate HTML table data dynamically. You will start by generating a table with rows containing data from an array of objects. You will then work with forms and query strings to generate HTML based on subsets of the provided data set.

Preliminaries

This lab requires working with JavaScript strings, objects, and arrays. The following pages provide sufficient explanation for everything you need for this lab:

Starter Code

Download and extract the source code in lab3.zip. This archive contains five files that you will need:

  • course.html – HTML page for showing details about a single JMU CS course. You will not modify or submit this file but you will need to be familiar with its contents.
  • course.js – JavaScript file used to generate the contents shown in course.html.
  • data.js – JavaScript file containing an array of objects with information about JMU CS courses. You will not modify or submit this file but you will need to be familiar with its contents.
  • index.html – HTML page for showing a list of all JMU CS courses.
  • table.js – JavaScript file used to generate the contents shown in index.html.

Requirements

You should start by familiarizing yourself with the contents of the files provided. Examine the HTML elements that are provided, including any ID attributes. Examine the JavaScript files to read the comments guiding your work.

Step 1: Generate an HTML table

Your work starts in table.js. To simplify your work (and avoid unnecessary repetition), we have defined a helper function called buildTableRow(). For now, just think of this as similar to functions that you've seen in other languages. This function takes one parameter, which is an object containing information about a JMU CS course. You'll build and return a string based on this object.

Once you've completed this function, look for the comment near the bottom of the file for "Step 1." Use the function above with a loop, along with the JavaScript document.write() function to generate the HTML table dynamically.

Step 2: Respond to a custom query

In the previous step, the table contained HTML links that included query strings. For instance, the text CS 149 would link to course.html?cs-149. The course.html file contains a definition list with fields that have no information. Your task is to complete the code in course.js to add information to these fields based on the query string.

Given a particular query string, you will need to search through the array of courses to find one with a matching name. Later in the course, you will learn about better ways to search through the array, but a simple for-loop is fine for now.

Once you've found the course, set the definition list fields based on the object's data fields. Recall that you can update the text shown in any HTML element with the following line of code (assuming the element has the id="my-data" attribute):

document.getElementById('my-data').textContent = 'new text';

Step 3: Forms and queries

Finally, you will need to create and use an HTML form to filter the course data based on a search box. Start by creating an HTML form in index.html based on the comments. Note that the text box should not use type="text". This <input> element is a search box, so it needs to use the appropriate type. You can learn about the various types in the reference for the input element.

Once you've created the form, you should be able to type into it and submit the form by hitting the Enter key. When you do this, the page should reload with a query string based on what you typed. If you typed the word data into the search box, then the page should load as index.html?terms=data. Based on this search term, only include a course in the table if its description field contains data as a substring. (For simplicity, we are doing only exact matches; don't worry about uppercase or lowercase.)

The simplest way to do this would be to create a new empty array of courses. Loop through the full course list; if the description matches the search criteria, add the course to this new array. You can then use this array with your loop from Step 1.

Optional: Taking the next steps

For this lab, you only have to search for a single term using an exact match. But what if the user enters multiple words, such as graph stack. The browser will replace the space with a + character, making the URL index.html?terms=graph+stack. Extend your implementation so that you split the search string into the separate terms graph and stack, then return only the classes that have both terms.

You can propose your own additional variations, as well. Extend this implementation so that any arbitrary number of terms can be entered. Or do a case-insensitive search so that both graph and Graph would be shown in index.html?terms=graph. You could also make the search match words instead of substrings, so the search term graph would match graph but not graphics.

Submission

Submit your course.js, index.html, and table.js files to Gradescope.