SpringMVC + JSON + Ajax, как обработать массив JSON и добавить код в HTML?

Question

[vincent_gun]

Доброго времени!

Разрабатываю приложение на Spring MVC. С помощью JSON возвращаю на клиент массив, перехватываю его в Ajax:

<...>
}).done(function (result) {

        alert(JSON.stringify(result));

    })
<...>

Под result возвращается требуемый массив. Например:

[
{"id":97,"routeName":"Msk - SPb","stationName":"Moscow","dateArrival":"","dateDeparture":"2018-11-21 10:00:00.0"},
{"id":98,"routeName":"Msk - SPb","stationName":"Pskov","dateArrival":"2018-11-21 15:40:00.0","dateDeparture":"2018-11-21 15:50:00.0"},
{"id":99,"routeName":"Msk - SPb","stationName":"Saint Petersburg","dateArrival":"2018-11-21 19:10:00.0","dateDeparture":""}
]

Подскажите или направьте в нужном направлении, как распарсить этот массив и добавить в код html-страницы в виде таблицы (в JS не силён). Возвращается всегда полный дополненный новым значением массив, действие происходит при нажатии кнопки "добавить".

Answer 1

[Ihor Bratukh]

Ну если вкратце то как-то так:

ajax('https://example.com/stations', { //> https://example.com/stations?country=russia&limit=10
    country: 'russia',
    limit: 10
}).done(function (data) {
    var table = '';
    for (var key in data) {
        table += templateDOM(data[key]) || '';
    }
    $('body').append('<table>' + table + '</table>');
});

function ajax(link, params, setup) {
    return $.ajax($.extend(true, {}, {
        method: 'GET',
        dataType: 'json'
    }, setup || {}, {
        url: link + (params ? '?' + $.param(params) : '')
    }));
}

function templateDOM(data) {
    return `
        <tr>
            <td>${data.id}</td>
            <td>${data.routeName}</td>
            <td>${data.stationName}</td>
            <td>${data.dateArrival || '-----'}</td>
            <td>${data.dateDeparture}</td>
        </tr>
    `;
}