<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="keywords" th:content="${keywords}"/>
    <title>List of all persons</title>
    <style type="text/css">
        body {
            padding: 50px;
        }

        .persons, .persons td {
            border: 1px solid lightgray;
            padding: 5px;
        }
    </style>
    <script src="/webjars/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1>Persons:</h1>

<table class="persons">
    <thead>
    <tr>
        <th>ID</th>
        <th>Name</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<script>
    $(function () {
        $.get('/api/persons').done(function (persons) {
            persons.forEach(function (person) {
                $('tbody').append(`
                    <tr>
                        <td>${person.id}</td>
                        <td>${person.name}</td>
                    </tr>
                `)
            });
        })
    });
</script>
</body>
</html>
