In this assignment, you will use regular JavaScript and the Fetch API to read an external...

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Using Fetch to read a JSON file</title>
    <meta name="description" content="This is a simple example using Fetch to read a 
       JSON string then add student data as rows in an HTML table.">
    <meta name="author" content="Your name here">

    <!-- link to external CSS file -->
    <link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
    <!-- Content of the page goes here. -->
    <main>
        <h1>Use Fetch to read JSON data</h1>
        <section class="intro">
            <h2>Introduction</h2>
            <p>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. 
            </p>
        </section>

        <section class="student-info">
            <h2>Student Information from JSON file</h2>
            <p class="loading">Loading student data...</p>
            <table id="student-table">
              <thead>
                <tr><th scope="col">Name</th><th scope="col">Favorite Hobby</th><th scope="col">Favorite Color</th></tr>
              </thead>
              <tbody>
              </tbody>
            </table>
        </section>
    </main>
    
    <!-- link to external JS file -->
    <script src="js/scripts.js"></script>
</body>
</html>

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

Solutions

Expert Solution

Note:

for json file, I have used the sample.json file (replace with your own json file)

code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Using Fetch to read a JSON file</title>
<meta name="description" content="This is a simple example using Fetch to read a
JSON string then add student data as rows in an HTML table.">
<meta name="author" content="Your name here">

<link rel="stylesheet" href="css/styles.css?v=1.0">
<style>
.loadingHidden{
display:none;
}
</style>
</head>
<body>

<main>
<h1>Use Fetch to read JSON data</h1>
<section class="intro">
<h2>Introduction</h2>
<p>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.
</p>
</section>

<section class="student-info">
<h2>Student Information from JSON file</h2>
<p class="loading">Loading student data...</p>
<table id="student-table">
<thead>
<tr><th scope="col">Name</th><th scope="col">Favorite Hobby</th><th scope="col">Favorite Color</th></tr>
</thead>
<tbody>
</tbody>
</table>
</section>
</main>


<script src="js/scripts.js"></script>
<script>
var students=[];
var table=document.getElementById('student-table').getElementsByTagName('tbody')[0];

fetch('sample.json').then(function(response) {
return response.json();
})
.then(function(res) {
students=res;
   for(var i=0;i<students.length;i++)
   {
       var fragment = document.createDocumentFragment();
       var tr = document.createElement("TR");
       for(var j=0;j<3;j++)
       {

           var td = document.createElement("TD");
           if(j==0)
           {
               var name=students[i].last_name +" "+students[i].first_name;
               var data = document.createTextNode(name);
           }
           else if(j==1)
           {
               var data = document.createTextNode(students[i].favorite_hobby);
           }
           else
           {
               var data = document.createTextNode(students[i].favorite_color);
           }
           td.appendChild(data)
           tr.appendChild(td);
       }
       fragment.appendChild(tr);
       table.appendChild(fragment);
   }
   var loading_cls=document.querySelector(".loading");
   document.querySelector(".loading").setAttribute("class","loadingHidden");

});

</script>
</body>
</html>

venereology answered 4 months ago

Next > < Previous

Related Solutions

Use external CSS and Javascript files. Use the HTML5 elements to layout the page. In a...

Use external CSS and Javascript files. Use the HTML5 elements to layout the page. In a sidebar include an advertisement that changes its image every three seconds. The can be created in paint and be very simple or more detailed.

Use external CSS and Javascript files Use the HTML5 elements to layout the page. Have a...

Use external CSS and Javascript files Use the HTML5 elements to layout the page. Have a bulleted list and 3 paragraphs this can be loren ipsum. Have the information text fade in when the page is done loading. Stagger the animations so that the text that is higher up on the page fades in before. Add three more animations in addition to the ones above including an interval timer based animation, an event based animation click or hover, and an...

For this assignment, you will read the scenario and then use the provided Excel and Word...

For this assignment, you will read the scenario and then use the provided Excel and Word document templates to complete your assignment before uploading them to the assignment submission area. Scenario Larry and Beth are both married, working adults. They both plan for retirement and consider the $6,000 annual contribution a must. First, consider Beth's savings. She began working at age 20 and began making an annual contribution to her IRA of $6,000 each year until age 32 (12 contributions)....

For this assignment you need to create a ToDo list using Javascript, along with HTML and...

For this assignment you need to create a ToDo list using Javascript, along with HTML and CSS. Begin by creating a HTML page called todo.html. Then create a Javascript file called todo.js and link it in to the HTML page using a script tag. All Javascript for the assignment must be in the separate file. (For CSS, feel free to include styles in a style block at the top of the HTML page, or to link in CSS from a...

For this assignment you need to create a ToDo list using Javascript, along with HTML and...

Regular Expressions Assignment Write a regular expression for each of the following. Can you show output...

Regular Expressions Assignment Write a regular expression for each of the following. Can you show output please. A blank line (may contain spaces) Postal abbreviation (2 letters) for State followed by a space and then the 5-digit zip code A KU student username (Ex. lpork247) A “valid” email address (also explain how you defined “valid”) A SSN pattern (ddd-dd-dddd)

API Development Essay Read and reflect on the contribution in the FINTECH Book titled "Banking on...

API Development Essay Read and reflect on the contribution in the FINTECH Book titled "Banking on Innovation Through Data". Compose a persuasive 500 words linking fintech innovation, data, and APIs. Cite the book to support your paper's main ideas. Illustrate your ideas with an example of a real-life third-party fintech API. Persuade readers on the following issues: Explain why banks open up their data and services to innovative developers Describe the advantage to third party companies of access to customer data...

For this assignment, you will write a tic-tac-toe application in HTML and JavaScript, using an HTML...

For this assignment, you will write a tic-tac-toe application in HTML and JavaScript, using an HTML <canvas> tag. The game will be played "hot seat" where players take turns using the same device. Requirements: The canvas should be 600px tall and wide, with the gameplay area occupying most of the canvas. The X's and O's may be drawn using polygons or large-font text The grid should be drawn using polygons, specifically long, thin rectangles Before & between games, the canvas...

PLEASE READ ALL OF THESE INSTRUCTIONS BEFORE BEGINNING THIS ASSIGNMENT. For this assignment, you need to...

PLEASE READ ALL OF THESE INSTRUCTIONS BEFORE BEGINNING THIS ASSIGNMENT. For this assignment, you need to analyze the information below from BOTH the management AND the employee perspective. This information pertains to a labor union in a simulated/made up/not real firm in Glen Ellyn. The first part of your information relates to Management – the second part relates to the Labor Union employees. I have provided you with information from the last union negotiations at the plant in 2016. It...

Read an article on the purpose of GAAP (Links to an external site.)Links to an external...

Read an article on the purpose of GAAP (Links to an external site.)Links to an external site. . Write a 1-2 page paper that addresses the following questions: How does GAAP standardize accounting records across companies? Why are private businesses not required to follow GAAP? Which issues may have occurred before rules for accounting documentation were standardized? Who maintains GAAP rules? Why is this separate from the responsibilities of government? What is the difference between preparing reports without GAAP? What...

Subjects