<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>GFG User Details</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;
        }

        h1 {
            text-align: center;
            color: #006600;
            font-size: xx-large;
            font-family: 'Gill Sans',
                'Gill Sans MT', ' Calibri',
                'Trebuchet MS', 'sans-serif';
        }

        td {
            background-color: #E4F5D4;
            border: 1px solid black;
        }

        th,
        td {
            font-weight: bold;
            border: 1px solid black;
            padding: 10px;
            text-align: center;
        }

        td {
            font-weight: lighter;
        }
    </style>
</head>

<body>
    <section>
        <h1>GeeksForGeeks</h1>

        <!-- TABLE CONSTRUCTION-->
        <table id='table'>
            <!-- HEADING FORMATION -->
            <tr>
                <th>GFG UserHandle</th>
                <th>Practice Problems</th>
                <th>Coding Score</th>
                <th>GFG Articles</th>
            </tr>

            <script>
                $(document).ready(function () {

                    // FETCHING DATA FROM JSON FILE
                    $.getJSON("http://original.radiosnet.com.ar/api/v1/preferencias/cotiz_json.php",
                            function (data) {
                        var student = '';

                        // ITERATING THROUGH OBJECTS
                        $.each(data, function (key, value) {

                            //CONSTRUCTION OF ROWS HAVING
                            // DATA FROM JSON OBJECT
                            student += '<tr>';
                            student += '<td>' +
                                value.compra + '</td>';

                            student += '<td>' +
                                value.venta + '</td>';

                            student += '<td>' +
                                value.comprab + '</td>';

                            student += '<td>' +
                                value.ventab + '</td>';

                            student += '</tr>';
                        });

                        //INSERTING ROWS INTO TABLE
                        $('#table').append(student);
                    });
                });
            </script>
    </section>
</body>

</html>
