The data comes here from a JSON file, and is stored in a table, the table values are marked undefined. I just need values to show from the JSON file. I will also include the JSON and CSS file here for it to be simple.

Add Rows to a Table

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 as new rows in an existing table.

Student Information from JSON file

Name	Favorite Hobby	Favorite Color

//JSON file

{ "students": [ { "fname": "Amin Mohammad", "fhobby": "Video Gmaes", "fcolor": "Green" }, { "fname": "Larry Hansley", "fhobby": "Soccer", "fcolor": "White" }, { "fname": "John Ceana", "fhobby": "Wrestling", "fcolor": "Green" }, { "fname": "Shaun Goave", "fhobby": "Football", "fcolor": "Red" }, { "fname": "Carry Green", "fhobby": "Walking", "fcolor": "Blue" } ] }

//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 #aaa; 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; }

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% 6em 5%; margin: 4em ; } }