users.html

<h2>Users</h2>

<table class="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Avatar</th>
            <th scope="col">First Name</th>
            <th scope="col">Last Name</th>
            <th scope="col">Email</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<script>
    $(document).ready(function () {
        console.log('Users loaded');

        $.ajax({
            url: "https://reqres.in/api/users",
            success: function (response) {
                let table = $('table > tbody');
                console.log('success', response);
                response.data.forEach(element => {

                    let row = `
                    <tr>
                        <th scope="row">${element.id}</th>
                        <td><img src="${element.avatar}" height="32" width="32"></td>
                        <td>${element.first_name}</td>
                        <td>${element.last_name}</td>
                        <td>${element.email}</td>
                    </tr>`;
                    table.append(row);

                });
            },
            error: function (xhr, ajaxOptions, thrownError) {
                console.log(`request failed with status : ${xhr.status}, underlying error: ${xhr.responseText}`);
                showAlert('error', 'Error fetching users at this time. Please try again later!');

            },

        });


    });

</script>