-
Notifications
You must be signed in to change notification settings - Fork 0
/
list.html
83 lines (79 loc) · 3.12 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
<!DOCTYPE HTML>
<html>
<header>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="table_style.css">
<title>Aayushi Sanghi</title>
</header>
<body>
<!---Navigation--->
<nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand" href="./index.html">Aayushi Sanghi's Webpage</a>
<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">Work Experience</a></li>
<li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="./Resources/Aayushi_Sanghi_Resume.pdf" target="_blank">CV</a></li>
</ul>
</div>
</nav>
<!--This code creates the middle section of the webpage-->
<header class="masthead bg-primary text-white text-center">
<h1>Work Experience</h1>
</header>
<!--Here is where the table will be loaded in. The actual table will be loaded in JavaScript.-->
<center>
<br /><br />
<div id="showDataJSON"></div>
</center>
</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>