//Hello, I need to use fetch to read a JSON file, belowJavascript file is supposed to read the data and put it in a table,but this code is not showing any results. I included all files butall you will need is the javascript file, the information fromjavascript should be stored in a table please.

//******************HTML

Using Fetch to read a JSONfile

Use Fetch toread JSON data

Introduction

In this assignment you will use Fetch to read in anexternal JSON data file.
You will then display the contents in a web page as new rows in anexisting table.

Student Information from JSON file

Loading student data...

Favorite HobbyFavorite Color

Name

<(script)src="scripts.js"><(/script)>

//******************JavaScript

// Wait until the page loads, then get some data todisplay.
window.onload = function() {
processData('students.json');
};

// Reads a file,
function processData(pathToResource) {
fetch(pathToResource)
.then(validateFetchResponse)
.then(displayData)
.catch(logError);
}
// Check to see if the request worked.
function validateFetchResponse(response) {
if (!response.ok) {
throw Error(response.statusText);
}
return response;
}

fetch('students.json')
.then(response => {
return response.json()
})
.then(data => {
// Work with JSON data here
console.log(data)
})
.catch(err => {
// Do something for an error here
})

// Display the data
function displayData(result) {
// Do something to display the data
console.log(result);
}

function logError(error) {
console.log('Looks like there was a problem: ', error);
}

//************* JSON file

{
"students": [
{
"fname": "David Hansley",
"fhobby": "Video Gmaes",
"fcolor": "Green"
},
{
"fname": "shaun Hansley",
"fhobby": "Soccer",
"fcolor": "White"
},
{
"fname": "John Ceana",
"fhobby": "Wrestling",
"fcolor": "Green"
},
{
"fname": "Will Goave",
"fhobby": "Football",
"fcolor": "Red"
},
{
"fname": "Carry Green",
"fhobby": "Walking",
"fcolor": "Blue"
}
]
}

//********************* CSS File

body {
background: transparenturl('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: transparenturl('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 #aaa;
padding: 2em 5% 3em 5%;
margin: 0 ;
display: flex-container;
}

section {
margin-bottom: 2em;
}

.student-info p {
background: transparenturl('https://chelan.highline.edu/~tpollard/assets/images/user_grayscale.png')center left no-repeat;
padding-left: 20px;
}

table {
border-collapse: collapse;
min-width: 90%;
}

tbody tr:nth-child(odd) {
background-color: #eff7fb;
}

td, th {
text-align: left;
padding-left: .3em;
padding-right: .3em;
}

tr {
border-bottom: 1px solid #ccc;
}

@media (min-width: 45em) {
main {
width: 80%;
padding: 2em 5% 6em5%;
margin: 4em ;
}
}

Answer rating: 100% (QA)

Code Breakdown HTML Structure An existing table with headers for Name Favorite Hobby and Favorite Color is present A message Loading student data is d... View the full answer