Description
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: 5 if (trucking_keys[j]==”Image”) { // do stuff } for (j=0; j<trucking_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: http://cs-server.usc.edu:45678/hw/hw4/truckinglist.json 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. http://cs-server.usc.edu:45678/hw/hw4/jbhunt.jpg http://cs-server.usc.edu:45678/hw/hw4/ups.jpg http://cs-server.usc.edu:45678/hw/hw4/con-way.png http://cs-server.usc.edu:45678/hw/hw4/fedex.png http://cs-server.usc.edu:45678/hw/hw4/swift.png http://cs-server.usc.edu:45678/hw/hw4/yrcw.png 6 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 submit your source code electronically to the csci571 account so that it can be graded and 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. 7