In this assignment, you will use regular JavaScript and the Fetch API to read an external JSON data file from the server and then add the data from each student object into new rows in an existing HTML table.

This assignment is very similar to the Adding Rows to a Table assignment. The main difference is that you will:

• Use the Fetch API instead of using the AJAX API to read the external JSON data file.

Set Up This Assignment

Add this HTML to your "week11/index.html" file. Put your name in the meta author tag (highlighted below).

             
 
Use Fetch to read JSON data
 
 
Introduction
 
In this assignment you will use Fetch to read in an external JSON data file. You will then display the contents in a web page as new rows in an existing table. 
 
 
 
Student Information from JSON file
 
Loading student data...
 
 
 
Name
Favorite Hobby
Favorite Color
 
 
 
 
 
 
    

JSON Data You will also use the same students.json file that you used in the week9 assignment. Put the JSON file in a "data" subdirectory: "week11/data/students.json"

CSS Stylesheet You will also use the same CSS file that you used in the week9 assignment. Put the CSS file in a "css" subdirectory: "week11/css/styles.css"

JavaScript Your "week11/js/scripts.js" file will use the fetch API to read an external JSON data file, then add student data as rows to an existing table. This page contains sample code that uses the fetch API: Fetch API: An Example

This displayData function needs to do these things:

• Create a DOM fragment.
• Loop through the "students" object.
• Read the first name, last name, favorite hobby, and favorite color from each object.
• Create a table row "tr" element.
• Create a table data "td" element for each column in the row.
• Add the student's name to the first column of the row using createTextNode, template literals, and appendChild. The first column should contain both the student's first and last name in this format - "lastname, firstname" - then append the td to the tr element.
• Add the student's hobby in the second column, then append it to the tr element.
• Add the student's favorite color in the third column, then append it to the tr element.
• Add the tr to a DOM fragment
• Finally, after you've built your DOM fragment append it the "#student-table tbody" element.
• Use querySelector to read the "p.loading" paragraph.
• Change the class attribute of that paragraph from 'loading' to 'loadingHidden' using 'classList.replace': Setting CSS Styles Using JavaScript