Как реализовать вывод пользователя на отдельной странице?

Question

[lolik20]

Есть короче 2 страницы: Лист с маршрутами и страница отдельного пользователя
Так же на сервере реализовано 2 GET запроса: Вывести лист с маршрутами и вывести пользователя по id.
Как мне реализовать логику чтобы из листа с маршрутами, нажимая на маршрут. Мы переходили на отдельную страницу этого юзера

Comments

[Kovalsky]

А в чем вопрос? Для того чтоб вывести данные пользователя на отдельной странице надо загрузить эти данные и распихать по странице

Если у вас какой-то фреймворк, то стоит это указать в вопросе

[lolik20]

Kovalsky, чистый js. Проблема в том что получить id пользователя и передать в функцию JS getUserById

[lolik20]

async function GetRoutes() {
    const response = await fetch("api/route/all", {
        method: "GET",
        headers: { "Accept": "application/json" }
    });
    // если запрос прошел нормально
    if (response.ok === true) {
        // получаем данные

        const players = await response.json();

        let rows = document.querySelector("#players");

        players.forEach(player => {
            rows.append(listPlayers(player));
        });
    }
}
function listPlayers(player) {

    const tr = document.createElement("div");
    

    const name = document.createElement("div");
    name.append(player.startPoint);
    tr.append(name);

    const surName = document.createElement("div");
    surName.append(player.endPoint);
    tr.append(surName);

    const dName = document.createElement("a");
    dName.setAttribute("href", "./user.html/api/user/" + player.userId);
    dName.append(player.userId);
    tr.append(dName);

    const phone = document.createElement("div");
    phone.append(player.userPhone);
    tr.append(phone);

    return tr;

}
GetRoutes();

[lolik20]

@lazalu68, 
async function GetUser(obj) {
    const response = await fetch("api/user/" + obj.userId, {
        method: "GET",
        headers: { "Accept": "application/json" }
    });
    // если запрос прошел нормально
    if (response.ok === true) {
        // получаем данные

        const players = await response.json();

        let rows = document.querySelector("#players");

        players.forEach(player => {
            rows.append(listPlayers(player));
        });
    }
}
function listPlayers(player) {

    const tr = document.createElement("div");


    const name = document.createElement("div");
    name.append(player.startPoint);
    tr.append(name);

    const surName = document.createElement("div");
    surName.append(player.endPoint);
    tr.append(surName);

    const dName = document.createElement("a");
    dName.setAttribute("href", "./user.html/api/user/" + player.userId);
    dName.append(player.userId);
    tr.append(dName);

    const phone = document.createElement("div");
    phone.append(player.userPhone);
    tr.append(phone);

    return tr;

}
GetUser(obj);