COMP3322 MODERN TECHNOLOGIES ON WORLD WIDE WEB
Workshop 2: JavaScript and AJAX
Overview
In this workshop, you will develop a simple Web app, which retrieves real-time MTR train data via the MTR Next Train Open Data API. As shown in Fig. 1, the app provides two drop-down selection lists for selecting the MTR line and the target station on that MTR line.
Fig. 1
Instead of listing all stations, you will design a selection menu that lists only the stations on that specific MTR line. For example, Fig. 2. and Fig. 3 show the lists of stations on the Airport Express line and Tseung Kwan O line respectively.
Fig. 2 Fig. 3
You will also practice retrieving the data using the fetch() promise call and extract the data from the returned JSON data file. Then present the data beneath the “Get Train Data” button as shown in Fig. 4.
Fig. 4
Task 1: Examine MTR Next Train Open Data
Step1: Visit the following Webpage under the DATA.GOV.HK Website. https://data.gov.hk/en-data/dataset/mtr-data2-nexttrain-data
Before using the API to access real-time MTR data, please download the two documents: Data dictionary for Next Train API and Next Train API Specification. https://opendata.mtr.com.hk/doc/Next_Train_DataDictionary_v1.1.pdf https://opendata.mtr.com.hk/doc/Next_Train_API_Spec_v1.1.pdf
These two documents contain necessary information for you to understand the structure of the returned JSON string and the meanings of various data objects (and terms) carried in the JSON string.
For example, in the API specification document, it gives an example of the response JSON string when the HTTP request is successful (as shown in Fig. 5) and another example of the response when no data is available for that line/station (as shown in Fig. 6).
Fig. 5
In the data dictionary document, we can find the required variables for using the API and the meanings of various terms and objects in the returned JSON data. Fig. 7 gives you the screen capture of the description of the UP/DOWN fields.
Fig. 6
Fig. 7
Step2: Retrieve the MTR data by manually composing the request URL.
Here is the resource URL: https://rt.data.gov.hk/v1/transport/mtr/getSchedule.php
To get the data, you need to provide a query string with two name/value pairs; they are the line parameter and station parameter.
For example, to query the next train arrival schedule of the Austin station on the West Rail line, we need this URL: https://rt.data.gov.hk/v1/transport/mtr/getSchedule.php?line=WRL&sta=AUS
Copy this URL and paste it to the Chrome browser and then the Firefox browser; you should find that Firefox presents the returned JSON data in a more visually useful way.
Fig. 8
Fig. 9
Use the same mechanism to create more requests to get data on different lines and stations.
Task 2: Implement the program
Download the template file from Moodle- “index_WS2.html”. Open it with a text editor. You will see it contains the following HTML content:
Using fetch to access MTR Next Train API
When the page is loaded, both the selection lists are empty.
Step 1: Fill in the selection options for selecting the four MTR lines. For example, the following option is for selecting the Airport Express line and it is the default option.
The other options are: ‘TCL’ for the Tung Chung line, ‘WRL’ for the West Rail line, and ‘TKL’ for the Tseung Kwan O line.
Step 2: Fill in the selection options for selecting the five stations on the Airport Express line. For example, the following option is for selecting the Hong Kong station on the Airport Express line.
To differentiate different stations on different lines, we add the class attribute and set its value to “AEL” for all stations on the Airport Express line.
When done, the two selection lists will look as follows:
Fig. 10
Currently, we only have the stations on the Airport Express line, we need to use JavaScript to change the set of stations from the AEL set to another set if the user selects another MTR line.Step 3: We have to build a ‘database’ which keeps the list of stations associated with each MTR line. This ‘database’ is an in-memory object with four key/value pairs. Each key maps to the set of station options for each MTR line. Enter the following code to the