-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
85 lines (67 loc) · 3.02 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <title>Students</title>
</head>
<body style='margin-left: 30px;'>
<h1>Select a Major</h1>
<p>We filter our Dataset by major</p>
<input type="button" id='btnCIT' value="Get CIT Student Scores">
<input type="button" id='btnBUS' value="Get BUS Student Scores">
<div id="result"></div> <!-- data will be displayed here -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.2/handlebars.min.js"></script>
<!-- template -->
<script type="text/x-handlebars-template" id='text-template'>
<table cellspacing='12'>
<tr><th>Name</th><th>Major</th><th>Midterm</th><th>Final</th></tr>
{{#each rows}}
<tr>
<td>{{name}}</td><td>{{major}}</td><td>{{midterm}}</td><td>{{final}}</td>
</tr>
{{/each}}
</table>
</script>
<script>
//CIT button
document.addEventListener('DOMContentLoaded', function() { // when page has loaded, more or less
document.querySelector('#btnCIT').onclick = function() { // attach event handler to button
var request = new XMLHttpRequest();
request.open('GET', 'cit5students.json'); // GET request for data
request.onload = function() { // when the data comes back...
if (request.status == 200) {
var x = JSON.parse(request.responseText); // convert from JSON to regular JavaScript array of objects
var data = x.filter(function(x){return x.major == "CIT"})
var source = document.getElementById('text-template').innerHTML; // get template text
var template = Handlebars.compile(source); // compile the template
var compiledHtml = template({ rows: data })
document.getElementById("result").innerHTML = compiledHtml;
}
else {
document.getElementById("result").innerHTML = "There was an error.";
}
}
request.send(null);
};
//BUS Button
document.querySelector('#btnBUS').onclick = function() { // attach event handler to button
var request = new XMLHttpRequest();
request.open('GET', 'cit5students.json'); // GET request for data
request.onload = function() { // when the data comes back...
if (request.status == 200) {
var x = JSON.parse(request.responseText); // convert from JSON to regular JavaScript array of objects
var data = x.filter(function(x){return x.major == "BUS"})
var source = document.getElementById('text-template').innerHTML; // get template text
var template = Handlebars.compile(source); // compile the template
var compiledHtml = template({ rows: data })
document.getElementById("result").innerHTML = compiledHtml;
}
else {
document.getElementById("result").innerHTML = "There was an error.";
}
}
request.send(null);
};
});
</script>
</body>
</html>