-
Notifications
You must be signed in to change notification settings - Fork 0
/
Index.html
198 lines (182 loc) · 7.53 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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Users</title>
<link rel="stylesheet" href="bootstrap.css">
<script type="application/json" src="Employees.json"></script>
<script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<section class="section">
<div class="container-fluid">
<h1 class="title">
Users
</h1>
<p class="subtitle" id="sub">
Display all users
</p>
<div class="container-fluid">
<table style="width:100%" id="usersTable" class="table table-striped table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Username</th>
<th>Email</th>
<th>Address</th>
<th>Zip Code</th>
<th>Latitude</th>
<th>Longitude</th>
<th>Phone</th>
<th>Website</th>
<th>Company</th>
<th>Phrases</th>
<th>BS</th>
</tr>
</thead>
<tbody id="userDataRows">
</tbody>
</table>
<button id="searchButton" onclick="PopulateTable()">Refresh</button>
</div>
</div>
<script>
let isFirstLoad = true;
// fills the table with the userdata
async function PopulateTable() {
let users = await jQuery.getJSON("https://jsonplaceholder.typicode.com/users");
// specifies the structure the data is populated
let userRows = users.map((user) => {
return [
user.id,
user.name,
user.username,
user.email,
user.address.city + " " + user.address.street + " " + user.address.suite,
user.address.zipcode,
user.address.geo.lat,
user.address.geo.lng,
user.phone,
user.website,
user.company.name,
user.company.catchPhrase,
user.company.bs
]});
for (let i = 0; i < userRows.length; i++) {
let user = userRows[i];
// if it is the first time the data loads this will not fire because there can be no duplicates when there is no data
if (!isFirstLoad) {
let isDataDuplicate = await IsDuplicate(user);
console.log(isDataDuplicate);
}
// template for the structure of the data in the HTML
let userTemplate = `
<tr>
<td>${user[0]}</td>
<td>${user[1]}</td>
<td>${user[2]}</td>
<td>${user[3]}</td>
<td>${user[4]}</td>
<td>${user[5]}</td>
<td>${user[6]}</td>
<td>${user[7]}</td>
<td>${user[8]}</td>
<td>${user[9]}</td>
<td>${user[10]}</td>
<td>${user[11]}</td>
<td>${user[12]}</td>
</tr>
`;
// Inserts the data into the table
// beforeEnd inserts the data in the just inside the element just after its last child, documentation of this is found here https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
let parent = document.getElementById("userDataRows");
parent.insertAdjacentHTML('beforeEnd', userTemplate);
}
isFirstLoad = false;
}
// checks if there are duplicate IDs and returns a boolean accordingly
function IsDuplicate(user) {
let table = document.getElementById("usersTable");
// if the IDs are the same return true, if one of the ids are undefined return false, if the IDs do not match return false
for (let i = 1; i <= table.rows.length; i++) {
console.log(user[0]);
console.log(table.rows[i].cells[0].innerHTML)
if (typeof table.rows[i].cells[0].innerHTML != 'undefined' || typeof user[0] != "undefined") {
if (table.rows[i].cells[0] == user[0]) {
console.log(true);
return new Promise(resolve => {
resolve(true);
});
}
}
return new Promise(resolve => {
resolve(false);
});
}
console.log(false)
return new Promise(resolve => {
resolve(false);
});
}
// Everything below this comment is deprecated, it is only used to show my thought process.
async function DeprecatedPopulateTable() {
let users = jQuery.getJSON("https://jsonplaceholder.typicode.com/users");
let numberOfUsers = users.length;
let table = document.getElementById("usersTable");
// Loops through all of the users and puts them in the table
for (let i = 0; i < numberOfUsers; i++)
{
let user = await buildRow(users[i]);
// template for format of a row
let userData = `
<tr>
<td>${user[0]}</td>
<td>${user[1]}</td>
<td>${user[2]}</td>
<td>${user[3]}</td>
<td>${user[4]}</td>
<td>${user[5]}</td>
<td>${user[6]}</td>
<td>${user[7]}</td>
<td>${user[8]}</td>
<td>${user[9]}</td>
<td>${user[10]}</td>
<td>${user[11]}</td>
<td>${user[12]}</td>
</tr>
`;
// adds userData to the table
document.getElementById("userDataRows").innerHTML = document.getElementById("userDataRows").innerHTML + userData;
}
}
// returns an array with the relevant data for the next row
function buildRow(user) {
let rowData = [
user.id,
user.name,
user.username,
user.email,
// Formatting of the users address to save space.
user.address.city + " " + user.address.street + " " + user.address.suite,
user.address.zipcode,
user.address.geo.lat,
user.address.geo.lng,
user.phone,
user.website,
user.company.name,
user.company.catchPhrase,
user.company.bs
];
return new Promise(resolve => {
resolve(rowData);
});
}
</script>
</section>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
</body>
</html>