In this project you will explore how to retrieve text data from a JSON file and display that data in a web table. The first few lines of a JSON file containing a staff directory is shown in Figure 8-37.

In this file, there is single root object named directory containing an array of objects with each object containing key:value pairs for the employee id, first name, last name, position, department, email address, and phone number. To iterate through these properties, you will use a for in loop with the following general form:

for (let prop in object) {

commands

}

where prop references the properties associated with object and commands are the commands applied to each key:value pair in the object. Figure 8-38 shows the final version of the web table you will create for this project. Do the following:

1. Use your code editor to open the project08-04_txt.html and project08-04_txt.js files from the js08 c project04 folder. Enter your name and the date in the comment section of each file and save them as project08-04.html and project08-04.js, respectively.

2. Go to the project08-04.html file in your code editor and link the page to the project08-04.js file, deferring the script until after the page loads. Close the file, saving your changes.

3. Return to the project08-04.js file in your code editor. Some of the code to create the app has already been entered for you. Go to the onload event handler for the fr (file reader) variable and add the following code:

a. Add a command to convert the contents of the JSON data in fr.result into an object named staff.

b. Call the makeStaffTable() function using staff as the parameter value.

4. Go to the makeStaffTable() function and add the commands described in Steps 5 through 7.

5. First create a table row containing the property names stored in the JSON file using the properties from the first directory entry. Create a for in loop for the object stored in staff.directory[0] and add the following commands to the loop:

a. Use the document.createElement() method to create a th element named headerCell.

b. Store prop as the text content of headerCell.

c. Use the appendChild() method to append headerCell to the headerRow object.

d. After the for in loop completes, append headerRow to the staffTable object.

6. Next, create table rows containing the property values for each entry in the directory array. Add a for loop that loops through the items of staff.directory. Within the for loop do the following:

a. Create an element node for the tr element and store it in the tableRow variable.

b. Create a for in loop for the properties listed in the staff.directory[i]. For each property do the following: (i) Create an element node for the td element and store it in the tableCell variable; (ii) store the value of staff.directory[i][prop] as the text content of tableCell; (iii) append tableCell to the tableRow object. c. After the for in loop completes, append tableRow to the staffTable object.

7. After the for loop is finished, use the appendChild() method to append staffTable to the containerBox object.

8. Save your changes to the file and then load project08-04.html in your web browser.

9. Click the Choose File button and open the staff.json file from the js08 c project04 folder. Verify that the contents of the file are converted into a web table with the property names in the first table row and the property values for each directory entry shown in subsequent table rows.

HTML File:

Hands-on Project 8-4

Staff Directory

JS File:

"use strict";

let getFileButton = document.getElementById("getFile"); let containerBox = document.getElementById("container");

getFileButton.onchange = function() { // Retrieve information about the selected file let JSONfile = this.files[0]; // Read the contents of the selected file let fr = new FileReader(); fr.readAsText(JSONfile);

// Once the file has finished loading, parse the JSON file fr.onload=function(){ } };

function makeStaffTable(staff) { let staffTable = document.createElement("table"); let headerRow = document.createElement("tr");

}

sample of Json file:

{ "directory" : [ { "id" : "emp850-02", "firstName" : "Hyun", "lastName" : "Choi", "position" : "Accounting Specialist I", "dept" : "CU Accounting Services", "email" : "hyun.choi@ccul.example.com", "phone" : "800-555-8142" }, { "id" : "emp300-01", "firstName" : "Dan", "lastName" : "Moses", "position" : "VP of Governmental Affairs", "dept" : "Advocacy", "email" : "dan.moses@ccul.example.com", "phone" : "800-555-3193" }, { "id" : "emp300-02", "firstName" : "Michael", "lastName" : "Heller", "position" : "VP of Governmental Affairs", "dept" : "Advocacy", "email" : "michael.heller@ccul.example.com", "phone" : "800-555-4488" }

}]