Below is some sample code to utilize that allows the user to create a table using the Osano cookie disclosure JSON. It is merely an example, but can be customized as customers see fit.
Note that the below example uses jQuery to parse the JSON and requires the https://code.jquery.com/jquery-3.5.1.js script in order to function appropriately.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Osano Cookie Disclosures</title>
<!-- INCLUDING JQUERY -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<!-- CSS FOR STYLING THE PAGE -->
<style>
table {
margin: 0 auto;
font-size: large;
border: 1px solid black;
border-collapse: collapse;
}
h1 {
text-align: center;
color: black;
font-size: x-large;
font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', 'sans-serif';
}
td {
background-color: white;
border: 1px solid black;
}
th,
td {
font-weight: bold;
border: 1px solid black;
padding: 10px;
text-align: left;
}
td {
font-weight: lighter;
}
</style>
</head>
<body>
<section>
<h1>Cookies we may use</h1>
<!-- TABLE CONSTRUCTION -->
<table id='table'>
<!-- HEADING FORMATION -->
<tr>
<th>Cookie Name</th>
<th>Category</th>
<th>Purpose</th>
<th>Expiry</th>
</tr>
<script>
$(document).ready(function () {
function fetchData() {
// Clear existing rows except the header
$('#table').find("tr:gt(0)").remove();
// FETCHING DATA FROM JSON FILE
$.getJSON("https://disclosure.api.osano.com/customer/xxx/config/xxx?language=en.json",
function (data) {
var cookie = '';
// ITERATING THROUGH OBJECTS
$.each(data, function (key, value) {
// CONSTRUCTION OF ROWS HAVING DATA FROM JSON OBJECT
cookie += '<tr>';
cookie += '<td>' + value.name + '</td>';
cookie += '<td>' + value.classification + '</td>';
cookie += '<td>' + value.purpose + '</td>';
cookie += '<td>' + value.expiry + '</td>';
cookie += '</tr>';
});
// INSERTING ROWS INTO TABLE
$('#table').append(cookie);
// Schedule the next fetch after 72 hours (72 * 60 * 60 * 1000 ms)
setTimeout(fetchData, 72 * 60 * 60 * 1000);
});
}
// Initial fetch
fetchData();
});
</script>
</table>
</section>
</body>
</html>
