Creating a Table

  • Updated

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 () {

                    // 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);
                    });
                });
            </script>
  
  </table>
  </section>
  </body>
  </html>

Cookie Disclosure JSON Table