You
are required to write an HTML/JavaScript program, which takes the URL of a JSON
document containing Trucking companies information, parses the JSON file, and
extracts the list of trucking companies, 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 shpuld display a table consisting of the data for all
trucking companies that are contained in the JSON file. For example, given the
following

JSON
document:

1

http://cs-server.usc.edu:45678/hw/hw4/truckinglist.json

the
table below should be displayed:

Figure
2: Table containing airlines from airlinelist.json Here is a version of the
truckinglist.json file containing the data that is displayed above:

{

“Mainline”: {

“Table”: {

“Header”: {

“Data”: [

“Parent Company”,

“Subsidiary Portfolio / Services”,

“HQ / Info”,

“Annual Revenue ($ million)”,

“HomePage”,

“Logo”

2

]

},

“Row”: [

{

“Company”: “UPS”,

“Services”: “UPS Ground, UPS Freight”,

“Hubs”: {

“Hub”: [

“55 Glenlake Parkway, Sandy Springs,
Georgia, U.S.”,

“UPS is a global leader in logistics,
offering a broad range of solutions including the transportation of packages
and freight; the facilitation of international trade, and the deployment of
advanced technology to more efficiently manage the world of business.”

]

},

“Revenue”: “$24,752”,

“HomePage”: “https://www.ups.com/”,

“Logo”: “http://cs-server.usc.edu:45678/hw/hw4/ups.jpg”

},

{

“Company”: “FedEx”,

“Services”: “FedEx Ground, FedEx
Freight, FedEx Custom Critical”,

“Hubs”: {

“Hub”: [

“942 South Shady Grove Road[1],
Memphis, Tennessee, U.S.”,

“FedEx Corporation is an American multinational
courier delivery services company headquartered in Memphis, Tennessee. The name
FedEx is a syllabic abbreviation of the name of the company’s original air
division, Federal Express (now FedEx Express), which was used from 1973 until
2000. The company is known for its overnight shipping service, but also for
pioneering a system that could track packages and provide real-time updates on
package location.”

]

},

“Revenue”: “$14,149”,

“HomePage”: “https://www.fedex.com”,

“Logo”: “http://cs-server.usc.edu:45678/hw/hw4/fedex.png”

},

[……………]

]

}

}

}

3.
Error Handling

An
error condition that should be checked for a JSON file containing NO trucking
companies. An example of a JSON files which does not contain trucking company
entries:

3

{

“Mainline”: {

“Table”: {

“Header”: {

“Data”: [

“Parent Company”,

“Subsidiary Portfolio / Services”,

“HQ / Info”,

“Annual Revenue ($ million)”,

“HomePage”,

“Logo”

]

}

}

}

}

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: Company, Services,
Hubs, Revenue, 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”: [

“Company”,

“Services”,

“Location”,

“Revenue”,

“Home Page”,

“Trucking with Logo”

]

}

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

4

• Step 1: Writing Your HTML/JavaScript
program – Using the DOM

Parser

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.

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: