Untitled

<!DOCTYPE html>
<html>
<head>
    <title>User Cart</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        
        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <table id="userTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
                <th>Phone</th>
                <th>Username</th>
                <th>Image</th>
                <th>From User</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <script>
        $(document).ready(function() {
            $.ajax({
                url: 'https://dummyjson.com/users/',
                dataType: 'json',
                success: function(data) {
                    var users = data.users; // Access the array property containing users
                    
                    var tableBody = $('#userTable tbody');
                    
                    // Iterate over each user object in the array
                    $.each(users, function(index, user) {
                        var row = $('<tr>');
                        row.append($('<td>').text(user.id));
                        row.append($('<td>').text(user.firstname));
                        row.append($('<td>').text(user.lastname));
                        row.append($('<td>').text(user.email));
                        row.append($('<td>').text(user.phone));
                        row.append($('<td>').text(user.username));
                        row.append($('<td>').append($('<img>').attr('src', user.image))));
                        row.append($('<td>').text(user.from_user));
                        tableBody.append(row);
                    });
                },
                error: function() {
                    console.log('Error fetching data');
                }
            });
        });
    </script>
</body>
</html>
Editor is loading...