Question

How would I take data from a json file and turn it into a formatted table...

How would I take data from a json file and turn it into a formatted table in html?

0 0
Add a comment Improve this question Transcribed image text
Answer #1

Here is code:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>Table</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

td {

width: 150px;

text-align: center;

}

</style>

</head>

<body>

<table border="1" id="table"></table>

</body>

<script>

var data = [{

id: "123456789",

name: "Sage Perston",

score: 87.5

}, {

id: "6584145",

name: "Keagan Hayes",

score: 75

}, {

id: "8751561424",

name: "Aracell Decker",

score: 98

}, {

id: "15142342",

name: "Jesse Reese",

score: 79.81

}, {

id: "4524324354",

name: "Jackson Golden",

score: 88.5

}]

var table = document.getElementById("table");

var htmlStr = "";

htmlStr += `<thead><tr><th>StudentID</th><th>Student Name</th><th>Grade/Score</th></tr></thead>`

htmlStr += `<tbody>`;

var count = 1;

for (let i = 0; i < data.length; i++) {

htmlStr += `<tr><td>${data[i].id}</td>`;

htmlStr += `<td>${data[i].name}</td>`;

htmlStr += `<td>${data[i].score}</td>`;

htmlStr += `</tr>`;

}

htmlStr += "</tbody>";

table.innerHTML = htmlStr;

</script>

</html>

Output:

Add a comment
Know the answer?
Add Answer to:
How would I take data from a json file and turn it into a formatted table...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions
ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT