//Please look at following code. I must get the student information from JSON and display on page. previously answered but student info does not apear on the page.

//HTML file as followed

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...

//JavaScript file is as folows

// Display the student data. function displayData(students) { // Add the student data to the DOM. students = students.students // find the student-info section var str = ""; var y = document.querySelector("section.student-info"); // create a document fragment var frag = document.createDocumentFragment(); for (i = 0; i < students.length; i++) { // create paragraph to store one student info temp = document.createElement('p'); str = `Name: ${students[i].fname} ${students[i].lname}`; str += ` Favorite Subject: ${students[i].fschool}`; str += ` Favorite Hobby: ${students[i].fhobby}`; str += ` Favorite color: ${students[i].fcolor}`; temp.innerHTML = str; // add the paragraph to frag frag.appendChild(temp); } // add newly created document fragment in student-info section y.appendChild(frag);

// Hide the loading message. var x = document.querySelector("p.loading"); x.classList.replace("loading","loadingHidden"); }

//Here is the JSON file

{ "students": [ { "fname": "Brad", "lname": "Pit", "fschool": "Science", "fhobby": "Video Gmaes", "fcolor": "Green" }, { "fname": "Larry", "lname": "Hansley", "fschool": "Math", "fhobby": "Soccer", "fcolor": "White" }, { "fname": "John", "lname": "Ceana", "fschool": "English", "fhobby": "Wrestling", "fcolor": "Green" }, { "fname": "Shaun", "lname": "Goave", "fschool": "Hstory", "fhobby": "Football", "fcolor": "Red" }, { "fname": "Carry", "lname": "Green", "fschool": "Math", "fhobby": "Walking", "fcolor": "Blue" } ] }

//and finally the CSS

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 ; } }