Mam napisany backend w Springu i sądziłem, że zrobienie do tego klienta w JQuerry będzie łatwe. Niestety rośnie tylko ilość problemów. Umiem zrobić widoki dla endpointów jednoznacznie określonych czyli np.

$(document).ready(function() {
    $.ajax({
        url: "http://localhost:8080/api/db/owners"
    }).then(function(data) {
        for (var i = 0; data.length; i++) {
            $('.owner-list')
                .append(
                    '<tr>' +
                        '<td>' + data[i].id + '</td>' +
                        '<td>' + data[i].name + '</td>' +
                        '<td>' + data[i].surname + '</td>' +
                        '<td>' +
                                '<a href="api/db/owners/' + data[i].id + '/payments">Lista Płatności</a>' +
                        '</td>' +
                        '<td><a href="/">Edytuj</a></td>' +
                        '<td><a href="/">Usuń</a></td>' +
                    '</tr>')
        }
    });
});

Do tego można zrobić tabelkę, ale co poradzić gdy będzie chciał skorzystać z http://localhost:8080/api/db/owners/1 lub http://localhost:8080/api/db/owners/1/payments (tu będzie chodziło pod-zasób tablice płatności).

$(document).ready(function() {
    $("#button").click(function (event) {
            event.preventDefault();
            var ids = $('#id').val();
            $.ajax({
                url: "http://localhost:8080/api/db/owners/"+ ids +"/payments"
            }).then(function(data) {
                for (var i = 0; data.length; i++) {
                    $('.owner-payments-list')
                        .append(
                            '<tr>' +
                            '<td>' + data[i].id + '</td>' +
                            '<td>' + data[i].amount + '</td>' +
                            '<td>' + data[i].kind + '</td>' +
                            '<td>' + data[i].date + '</td>' +
                            '<td><a href="/">Edytuj</a></td>' +
                            '<td><a href="/">Usuń</a></td>' +
                            '</tr>')
                }
            });
            $("#button").prop("disabled", true);
    });
});

To drugie niby działa jakoś ale w zasadzie chodzi o to by kliknięcie w link guzik, generowało widok w zależności od wzorca ścieżki http://localhost:8080/api/db/owners/{id}/payments

[{"id":1,"payments":[{"id":47,"kind":"sex","amount":105.06,"date":"2020-03-05T14:25:33.000+0000"},{"id":57,"kind":"toys","amount":76.66,"date":"2020-03-05T16:49:21.000+0000"},{"id":58,"kind":"holidays","amount":45.02,"date":"2020-03-05T16:50:50.000+0000"},{"id":68,"kind":"home","amount":20.0,"date":"2020-03-05T19:00:51.000+0000"}],"name":"Joanna","surname":"Makowska"},{"id":2,"payments":[{"id":2,"kind":"shopping","amount":980.0,"date":"2020-03-02T19:44:41.000+0000"},{"id":8,"kind":"car","amount":2040.49,"date":"2020-01-27T20:15:40.000+0000"},{"id":11,"kind":"holidays","amount":550.5,"date":"2020-03-02T19:53:06.000+0000"},{"id":28,"kind":"toys","amount":90.01,"date":"2020-03-05T18:27:39.000+0000"},{"id":35,"kind":"shopping","amount":18.98,"date":"2020-03-04T20:07:30.000+0000"},{"id":37,"kind":"holidays","amount":768.98,"date":"2020-03-04T20:11:16.000+0000"}],"name":"Albert","surname":"Mańkuczek"},{"id":3,"payments":[{"id":3,"kind":"home","amount":350.5,"date":"2020-03-04T13:36:40.000+0000"},{"id":14,"kind":"home","amount":40.5,"date":"2020-03-02T19:53:48.000+0000"},{"id":15,"kind":"fast-food","amount":980.0,"date":"2020-02-29T12:55:16.000+0000"},{"id":36,"kind":"sex","amount":18.98,"date":"2020-03-04T20:08:31.000+0000"}],"name":"Roman","surname":"Giertych"},{"id":4,"payments":[{"id":32,"kind":"shopping","amount":16.9,"date":"2020-03-04T20:02:35.000+0000"}],"name":"Łukasz","surname":"Bednarski"},{"id":5,"payments":[{"id":17,"kind":"home","amount":350.5,"date":"2020-03-04T12:37:01.000+0000"},{"id":45,"kind":"sex","amount":11.22,"date":"2020-03-05T14:22:58.000+0000"}],"name":"Bronisław","surname":"Geremek"},{"id":8,"payments":[],"name":"Henryk","surname":"Koniec"},{"id":9,"payments":[],"name":"Adam","surname":"Serecki"},{"id":10,"payments":[{"id":21,"kind":"home","amount":50.9,"date":"2020-03-04T18:15:51.000+0000"}],"name":"Adam","surname":"Kunica"},{"id":13,"payments":[],"name":"Jan","surname":"Serce"}]

Proszę o pomoc, dodatkowe informacje JavaScript jest mi słabo znany.