javascript 追加用户id以获取数据

vkc1a9a2 于 2023-05-21 发布在 Java

关注(0)|答案(1)|浏览(121)

我从一个API中获取数据，api包含用户的信息，包括他们的名字，用户ID和所有这些信息。现在我从API获取数据，但我只想获取特定用户的数据。最初我想显示姓名和一个按钮来查看有关此人的更多信息。但是当按钮被点击时，我想用user_id获取关于用户的所有信息

let table;
const show = (data) => {
  table.innerHTML = data
    .map(({id,name,email, gender,status}) => `<tr>
      <td colspan="3">${name} </td>
      <td><button class="more" data-id="${id}" data-name="${name}" data-email="${email}" data-gender="${gender}" data-status="${status}"><span class="material-symbols-outlined">visibility</span></button></td>
      <tr hidden><td>${email}</td>
      <td>${gender}</td>
      <td>${status}</td>
      </tr>`)
    .join("");
};
const load = () => {
  fetch("url")
    .then(result => result.json())
    .then(show);
};
window.addEventListener("DOMContentLoaded", () => {
  table = document.getElementById('table');
  table.addEventListener("click", (e) => {
    const tgt = e.target.closest("button");
    if (!tgt) return;
    const id = tgt.dataset.id;
    const name = tgt.dataset.name;
    const email = tgt.dataset.email;
    const gender = tgt.dataset.gender;
    const status = tgt.dataset.status;
    document.getElementById("modal-name").textContent = name;
    document.getElementById("modal-email").textContent = email;
    document.getElementById("modal-gender").textContent = gender;
    document.getElementById("modal-status").textContent = status;
    $('#myModal').modal('show');
  })
  load();
});

JavaScript

来源：https://stackoverflow.com/questions/76290991/appending-user-id-to-fetch-data

1条答案

按热度按时间

czq61nw11#

备注

由于您使用的是2个不同的API调用，因此不需要将所有数据添加到button属性。
下面的代码获取一个用户列表，然后在页面加载时呈现他们的名字和一个按钮。单击按钮时，将调用另一个API来获取用户信息，然后将其显示在对话框中。
超文本标记语言

<table id="table">
    <tr>
        <th colspan="3">Full Name</th>
        <th>Action</th>
    </tr>
</table>

<dialog id="dialog"></dialog>

JS

const table = document.getElementById('table');
const dialog = document.getElementById('dialog');

window.addEventListener("DOMContentLoaded", async () => {
    // fetch list of users
    const users = await fetch('/api/users')
        .then(result => result.json())
        .catch(error => (console.error(error), null));

    // return if no users or errors
    if ( !users ) return;
    
    // Count rows and stage data to be rendered
    let count = 0;
    const frag = new DocumentFragment();
    
    // loop over user data
    for (const user of users || []) {
        if ( !user ) continue;
        const { id, name } = user;

        // Create a table row
        const row = document.createElement('tr');
        row.innerHTML = `<td colspan="3">${name}</td>
            <td>
                <button onclick="fetchUserById(this)" class="more" data-id="${id}">
                    <span class="material-symbols-outlined">visibility</span>
                </button>
            </td>`;

        // Add table row to staged data
        frag.appendChild(row);

        // render 10 rows at a time
        if (count > 0 && count % 10 == 0)
            table.appendChild(frag);
            
        count++;
    }
    
    // render remaining rows
    table.appendChild(frag);
});

async function fetchUserById( button ){
    // get id from button attribute
    const { id } = button.dataset || {};
    
    // fetch user data
    const user = await fetch(`/api/user/${id}`)
        .then(result => result.json())
        .catch(error => (console.error(error), null));
        
    // return if no users or errors
    if ( !user ) return;
    
    // Close the dialog if it was open
    dialog.close();

    // Render the data while dialog is closed
    dialog.innerHTML = `
        <span id="modal-name">${user.name}</span>
        <span id="modal-email">${user.email}</span>
        <span id="modal-gender">${user.gender}</span>
        <span id="modal-status">${user.status}</span>
        <span id="modal-other-info">${user.otherInfo}</span>
    `;

    // Open the dialog
    dialog.showModal();
}

赞(0）回复(0）举报 2023-05-21

我来回答

javascript 追加用户id以获取数据

1条答案

相关问题

热门标签

最新问答