In this assignment, you will use AJAX to read an external JSON data file from the server. You will convert this external JSON data file into a JavaScript object and then display the contents of the object in the web page.

This assignment is very similar to the Creating DOM Nodes assignment. The main difference is that you will:

• be reading in a JSON file that you already created: External JSON Data
• use Template Literals to build your paragraph contents: JavaScript Template Literals
• and change the class attribute of an HTML element: Setting CSS Styles Using JavaScript

Set Up This Assignment

In this assignment, I'm giving you HTML, CSS, and some of the JavaScript to use.

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

             
 
Use AJAX to Read a JSON file
 
 
Introduction
 
In this assignment you will use AJAX to read in an external JSON data file. You will convert this external JSON data file into a JavaScript object and then display the contents in a web page. 
 
 
 
Student Information from JSON file
 
Loading student data...
 
 
    

Add this CSS to your "css/styles.css" file:

body { background: transparent url('https://chelan.highline.edu/~tpollard/assets/images/tri.svg') top center no-repeat; background-size: cover; color: #555; font-family: Arial,Helvetica,sans-serif; } h1, h2, h3 { font-family: Arial, Helvetica, sans-serif; } h2 { border-bottom: 0.02em solid #3f87a6; color: #3f87a6; } .loading { background: transparent url('https://chelan.highline.edu/~tpollard/assets/images/ajax-loader_trans.gif') center left no-repeat; color: #94aace; font-size: smaller; font-style: italic; padding-left: 20px; } .loadingHidden { display: none; } main { width: 100%; min-height: 60vh; max-width: 40em; background: white; box-shadow: 0 0 2em #ccc; padding: 2em 5% 3em 5%; margin: 0 ; display: flex-container; } section { margin-bottom: 2em; } .student-info p { background: transparent url('https://chelan.highline.edu/~tpollard/assets/images/user_grayscale.png') center left no-repeat; padding-left: 20px; } @media (min-width: 45em) { main { width: 80%; padding: 2em 5% 6em 5%; margin: 4em ; } }

Like the previous assignments, you should use "window.onload" to wait until the HTML page is loaded before any of your other JavaScript is run: Waiting for the Page to Load & Event Listeners

At the beginning of your "js/scripts.js" file you should do something like this:

// Wait until the page loads. window.onload= function(){ // Read JSON data and display to page. processData(); }; 

The next function calls the ajaxLoadFile function. A copy of the ajaxLoadFunction to use is listed at the bottom of the assignment.

We pass in 2 arguments to the function:

1. the path to the file "data/students.json",
2. and the callback function to run after the file was successfully read from the server.

The callback function then converts the JSON string into a JavaScript object, and then passes that object to the displayData function:

// Read the student JSON string, convert it to a JavaScript object. function processData() { ajaxLoadFile('data/students.json', function(response) { // Convert JSON string into JavaScript Object. let jsResponse = JSON.parse(response); // Display the results displayData(jsResponse) ; }); } 

This displayData function needs to do these things:

• Loop through the "students" object.
• Read the first name, last name, and favorite hobby from each object.
• Use template literals to create your text for each paragraph: JavaScript Template Literals
• Add the paragraphs to a DOM fragment
• Add that DOM fragment into the "student-info" section element.
• Use querySelector to read the "p.loading" paragraph.
• Change the class attribute of that paragraph to from 'loading' to 'loadingHidden' using 'classList.replace': Setting CSS Styles Using JavaScript

// Display the student data. function displayData(students) { // Add the student data to the DOM. // Hide the loading message. }

Add the following JavaScript function to the end of your "js/scripts.js" file. You will use this function to read the JSON file from the server. Take some time to read through this code to understand how it works: Anatomy of an AJAX Request

/** * Description: Loads a file from the web server. Runs a callback function if sucessfull. * Parameters: filename The filename to load. * callback The callback function to run after the file has been loaded. */ function ajaxLoadFile(filename, callback) { // Create new request. let xobj = new XMLHttpRequest(); // Add datetime parameter to the URL to prevent browser caching. let bustCache = '?datetime=' + new Date().getTime(); xobj.open('GET', filename + bustCache, true); xobj.onreadystatechange = function() { // 4 == DONE, 200 == request was fulfilled. if (xobj.readyState == 4 && xobj.status == "200") { // File was loaded so run callback function. callback(xobj.responseText); } } xobj.send(null); }