Question

In: Computer Science

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 to external CSS file -->
<link rel="stylesheet" href="css/styles.css?v=1.0">
<style>
.loadingHidden{
       display:none;
   }
</style>
</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>
<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 11 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)....
JAVASCRIPT: /* Assignment 03: Complete this javascript */ // 1) Declare a variable named myValue //...
JAVASCRIPT: /* Assignment 03: Complete this javascript */ // 1) Declare a variable named myValue // Assign myValue the value of "Hello, how's it going?" // Print the value of myValue to the console // 2) Use the charAt() method to display the letter t // from the variable myValue in the console // 3) Use the indexOf() method to display the position of "going" // from the variable myValue in the console // 4) Use the slice() method to...
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)
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...
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...
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...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT