-
Notifications
You must be signed in to change notification settings - Fork 0
/
list.html
89 lines (87 loc) · 2.93 KB
/
list.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html>
<header>
<link rel="stylesheet" href="styleDownload.css" />
<link rel="stylesheet" href="table_style.css" />
<title>List of Cities</title>
</header>
<body>
<!---Navigation--->
<!--This section of code defines the navigation bar at the top of the page. The classes used here are defined in the style.css file.-->
<nav
class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top"
id="mainNav"
>
<div class="container">
<!--This code defines the "My Webpage" link in the top right corner of the navigation pane-->
<a class="navbar-brand" href="./index.html">Home</a>
<!--This code defines the "List" link in the top left corner of the navigation pane-->
<ul class="navbar-nav ms-auto">
<li class="nav-item mx-0 mx-lg-1">
<a class="nav-link py-3 px-0 px-lg-3 rounded" href="./list.html"
>List of Cities</a
>
</li>
</ul>
</div>
</nav>
<!--This code creates the middle section of the webpage-->
<header class="masthead bg-primary text-white text-center">
<h1>Cities I've been to</h1>
</header>
<!--Here is where the table will be loaded in. The actual table will be loaded in JavaScript.-->
<section class="mt-5 text-center">
<div id="showDataJSON"></div>
</section>
</body>
<script>
/*
* RENDERING THE JSON TABLE
* Get JSON data from file
* Get headers from retrieved data
* Set headers for table
* Add data to table
* Add table to DOM
*/
fetch("./list_data.json")
.then((response) => response.json())
.then((data) => {
/*
This section creates the base table and finds the root json node.
*/
var jsonTable = document.createElement("table");
var tr = jsonTable.insertRow(-1);
jsonTable.style.width = "75%";
let root;
for (let prop in data) {
root = prop;
}
/*
This section selects the headers for the table
*/
let headers = Object.keys(data[root][0]);
headers.forEach((header) => {
var th = document.createElement("th");
th.innerHTML = header;
tr.appendChild(th);
});
/*
This section adds the data into each row of the list
*/
let items = Object.keys(data[root]);
items.forEach((item) => {
tr = jsonTable.insertRow(-1);
for (let key in data[root][item]) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = data[root][item][key];
}
});
/*
This section adds the table to the HTML
*/
var divContainer = document.getElementById("showDataJSON");
divContainer.innerHTML = "";
divContainer.appendChild(jsonTable);
});
</script>
</html>