-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
134 lines (119 loc) · 4.39 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="robots" content="noindex,nofollow">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="favicon.ico" type="image/ico" />
<!-- Title and meta description
================================================== -->
<title>cloud.gov Pages + API example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uswds/3.7.1/js/uswds-init.min.js" crossorigin="anonymous"
referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uswds/3.7.1/css/uswds.min.css"
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="styles.css" type="text/css" rel="stylesheet" />
</head>
<body>
<a class="usa-skipnav" href="#main-content">Skip to main content</a>
<header class="usa-header usa-header--basic">
<div class="usa-nav-container">
<div class="usa-navbar">
<div class="usa-logo" id="logo">
<em class="usa-logo__text">
<a href="/" title="cloud.gov + Pages API Demo">
<span class="font-ui-md text-normal text-primary-darker">
<img alt="cloud.gov" class="height-4 text-middle" crossorigin="anonymous" src="cloud-gov-logo.svg">
Pages + API Demo
</span>
</a>
</em>
</div>
</div>
</div>
</header>
<main id="main-content">
<div class="grid-container">
<div class="grid-row">
<div class="grid-col">
<h1 class="text-center">FDIC Failed Banklist Table</h1>
</div>
</div>
<div class="grid-row">
<div class="grid-col">
<table class="usa-table usa-table--striped" id="data-table">
<caption style=" caption-side: bottom;">
<h2 class=" font-sans-sm">Source: Failed Bank List, FDIC.gov</h2>
<p class="text-normal">Last Updated: November 3, 2023</br>
The FDIC is often appointed as receiver for failed banks. This list includes banks which have failed
since October 1, 2000. This dataset is intended for public access and use. Source data at
<a href="https://catalog.data.gov/dataset/fdic-failed-bank-list">catalog.data.gov</a>
</caption>
</table>
</div>
</div>
</div>
</main>
<script>
async function getDataFromCloudAPI() {
let dataJson = null;
try {
const response = await fetch("https://cfpyapi.app.cloud.gov/get_table");
dataJson = await response.json();
} catch (error) {
console.log(error)
}
finally {
if (dataJson == null) return null;
return dataJson;
}
}
function createTableHead(rowData) {
const tableHead = document.createElement("thead");
let newRow = tableHead.insertRow();
Object.entries(rowData[0]).forEach(([key, value], cellIndex) => {
if (key !== "id") {
let newHeader = document.createElement('th');
newHeader.innerHTML = key;
newRow.appendChild(newHeader);
}
});
return tableHead
}
function createTableBody(rowData) {
const tableBody = document.createElement("tbody");
rowData.forEach((row, rowIndex) => {
let newRow = tableBody.insertRow(rowIndex);
Object.entries(row).forEach(([key, value], cellIndex) => {
if (key !== "id") {
let newCell = newRow.insertCell(cellIndex)
newCell.innerHTML = value;
}
});
});
return tableBody
}
function createTable(data) {
document.getElementById("data-table").appendChild(createTableHead(data));
document.getElementById("data-table").appendChild(createTableBody(data));
}
window.addEventListener("load", (event) => {
getDataFromCloudAPI().then((data) => {
if (data !== null) {
createTable(data);
}
});
});
</script>
<footer class="usa-footer">
<div class="grid-container usa-footer__return-to-top">
<a href="#">Return to top</a>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uswds/3.7.1/js/uswds.min.js" crossorigin="anonymous"
referrerpolicy="no-referrer" defer></script>
</body>
</html>