/ /

Creating a Disclosures Table

Updated 4 months ago

Below is some sample code to utilize that allows the user to create a table using the Osano 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 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
                   ...
Was this article helpful?
Subscribe to receive updates on this article