- 首页 >> Java编程

Homework: JSON Exercise

1. Objectives

Become familiar with the navigating JavaScript JSON objects;

Use of JSON.parse parser and synchronous XMLHttpRequest;

Transform the content of a JSON document into an HTML page.

2. Description

You are required to write an HTML/JavaScript program, which takes the

URL of a JSON document containing top grossing films information, parses

the JSON file, and extracts the list of top grossing films, displaying them in

a table. The JavaScript program will be embedded in an HTML file so that it

can be executed within a browser.

Your program should display a text box to enter the JSON file name

as shown below in Figure 1. On clicking the “Submit Query” button,

your program should display the table as shown below, Figure 2. If

the text box is left empty and Submit Query is clicked, an appropriate

error message must be shown.

Figure 1: Initial Page

Once the JSON file is downloaded, a JavaScript function within the

HTML file parses the JSON document that was passed as an input in

the edit box.

After parsing the JSON document, a popup window or tab should

display a table consisting of the data for all container shipping

companies that are contained in the JSON file. For example, given the

following JSON document:



the table below should be displayed:

Figure 2: Table containing films from filmslist.json

Here is a version of the filmslist.json file containing the data that is

displayed above:


"Mainline": {

"Table": {

"Header": {

"Data": [




"Worldwide Gross",

"Wiki Page",




"Row": [


"Title": "Avatar",

"Year": "2009",

"Hubs": {


"Hub": [

"Directed by James Cameron",

"Avatar, marketed as James Cameron's Avatar, is a 2009 American[8][9] epic

science fiction film directed, written, produced, and co-edited by James Cameron,

and stars Sam Worthington, Zoe Saldana, Stephen Lang, Michelle Rodriguez, and

Sigourney Weaver. The film is set in the mid-22nd century, when humans are

colonizing Pandora, a lush habitable moon of a gas giant in the Alpha Centauri star

system, in order to mine the mineral unobtanium, a room-temperature




"Gross": "$2,787,965,087",

"HomePage": "https://en.wikipedia.org/wiki/Avatar_(2009_film)",

"Logo": "http://csci571.com/hw/hw4/avatar.jpg"



"Title": "Titanic",

"Year": "1997",

"Hubs": {

"Hub": [

"Directed by James Cameron",

"Titanic is a 1997 American epic romance and disaster film directed, written, coproduced

and co-edited by James Cameron. A fictionalized account of the sinking of

the RMS Titanic, it stars Leonardo DiCaprio and Kate Winslet as members of different

social classes who fall in love aboard the ship during its ill-fated maiden voyage."



"Gross": "2,187,463,944",

"HomePage": "https://en.wikipedia.org/wiki/Titanic_(1997_film)",

"Logo": "http://csci571.com/hw/hw4/titanic.jpg"







3. Error Handling

An error condition that should be checked for a JSON file containing NO

films. An example of a JSON files which does not contain films entries:


"Mainline": {

"Table": {

"Header": {

"Data": [





"Worldwide Gross",

"Wiki Page",







In addition, your program should handle the case when the JSON file does

not exist. A proper message should be displayed.

The “structure” of the input JSON files will not change. We will not test the

case where one of the keys is missed. In other words, every Row always

contains the keys: Title, year, Hubs, Gross, HomePage, and Logo. The Hubs

tag contains an array with key Hub. Note that The Hub array may contain

ZERO or more values.

If the value of a tag is empty, you should display a blank cell.

You are required to handle the case where the Header data values are

different. Please note that the Data tag values might differ but the JSON

structure remains the same. For example, the Header can be like this:

"Header": {

"Data": [

"Title of Movie",

"Year of Release",


"Worldwide Gross",

"Wikipedia Page",




No other error conditions need be checked. In all cases if an error is found

your program should show an alert box indicating the error was detected.

4. Hints

? Step 1: Writing Your HTML/JavaScript program - Using the DOM



Here's how you could use the Microsoft DOM API and the Mozilla

DOM API (used in Firefox) to load and parse a JSON document into a

DOM tree, and then use the DOM API to extract information from

that document.

<script type="text/javascript">

var jsonDoc;

function loadJSON (url) {

var xmlhttp=new XMLHttpRequest();

xmlhttp.open("GET",url,false); //open, send, responseText are

xmlhttp.send(); //properties of XMLHTTPRequest


return jsonDoc;


// ....... processing the document goes here


Now you can parse the JSON file with JSON.parse and generate the

HTML table on the fly by navigating through the JSON object. You

can assume that every JSON file will have identical Object, Array and

key names.

Your task is to write a program that transforms this type of JSON file

into the table as shown above.

Step 2: Display the Resulting HTML Document

You should use the DOM document.write method to output the

required HTML.

Step 3: Use JavaScript control syntax

The only program control statements that you will need to use for this

exercise are the “if” and the “for” statements. The syntax of both

statements is practically identical to the syntax of the corresponding

statement in the C, C++ and Java languages, as in:

if (container_keys[j]=="Image") {

// do stuff


for (j=0; j<container_keys.length; j++) {


// do more stuff


Please make a note of the following issue:

Cross-Site Scripting (XSS):

JavaScript cannot call the resources from another domain. This is called

cross side scripting which is not allowed in browsers. Therefore, you must

put your JSON files and your script in the same domain. Please make sure,

when you are testing your implementation, to place both the HTML file and

the JSON file on your local machine IN THE SAME FOLDER. A sample

file can be copied from here:


Window.open() method must be used to pop up a new window which would

display the final widget.

Image files can be either local or remote, as these files do not exhibit the

cross-site scripting issue.

Scrollable Window:

The popup window should be scrollable so the user can read all records

listed in the window.

6. Image Test Files

These image files are provided for testing purpose.








7. Material You Need to Submit

On your course homework page, your link for this homework should go to a

page that looks like the one displayed in the Figure on page 1. This page


should include your entire JavaScript/HTML/CSS program in a single

file. Also, you should upload your source code electronically to the csci571

GitHub Classroom account so that it can be compared to all other students'

code via the MOSS code comparison tool. If your submission is composed

of multiple files, 3 points will be deducted.