Description
You are required to write an HTML/JavaScript program, which takes the
URL of a JSON document containing the list of the tallest buildings in the
world, parses the JSON file, and extracts the list of tallest buildings,
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 largest manufacturers of cars
on 2017 that are contained in the JSON file. For example, given the
following JSON document:
https://csci571.com/hw/hw4/buildinglist.json
1
the table below should be displayed:
Figure 2: Table containing tallest buildings from buildinglist.json
Here is a version of the buildinglist.json file containing the data that is
displayed above:
{
“Mainline”: {
“Table”: {
“Header”: {
“Data”: [
“Rank”,
“Name”,
“City / Country”,
“Height (ft)”,
“Wiki Page”,
“Image”
]
},
“Row”: [
{
“Rank”: “1”,
2
“Name”: “Burj Khalifa”,
“Hubs”: {
“Hub”: [
“Dubai”,
“United Arab Emirates”,
“Currently the tallest building and tallest structure in the world from 2010
onwards; tallest building completed in the 2010s.”
]
},
“Height”: “2,717”,
“HomePage”: “https://en.wikipedia.org/wiki/Burj_Khalifa”,
“Logo”: “https://csci571.com/hw/hw4/Burj_Khalifa.jpg”
},
{
“Rank”: “2”,
“Name”: “Shanghai Tower”,
“Hubs”: {
“Hub”: [
“Shanghai”,
“China”,
“The tallest building in China and in East Asia and tallest twisted building.”
]
},
“Height”: “2,073”,
“HomePage”: “https://en.wikipedia.org/wiki/Shanghai_Tower”,
“Logo”: “https://csci571.com/hw/hw4/Shanghai_tower_dec_26,_2014.jpg”
},
[……………]
]
}
}
}
3. Error Handling
An error condition that should be checked for a JSON file containing NO
buildings. An example of a JSON files which does not contain building
entries:
{
“Mainline”: {
“Table”: {
“Header”: {
“Data”: [
“Rank”,
“Name”,
“City / Country”,
“Height (ft)”,
“Wiki Page”,
3
“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: Rank, Name, Hubs, Height, HomePage, and Logo. The
Hubs tag contains an array with key Hub. Note that The Hub array may
contain ZERO or more values. The first Hub array element should be
boldfaced.
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”: [
“Rank of building”,
“Name of Building”,
“Location Info”,
“Feet”,
“Wikipedia Page”,
“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
4. Hints
• 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
5
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
JavaScript runtime error. The solution is to split the string “