如何基于user_id获取特定用户API数据？实现初始显姓名+点击查详情

你的需求是从API获取用户数据后，初始只显示用户名和「查看更多」按钮，点击按钮时通过user_id重新请求该用户的完整信息。原代码的问题在于提前把所有用户信息存在了按钮的data属性里，没有实现点击时通过API拉取的逻辑，下面是修正后的实现方案：

核心思路 #

• 初始加载时，只请求并渲染用户名和携带user_id的按钮，不额外存储用户其他信息
• 点击「查看更多」按钮时，提取按钮上的user_id，发起新的API请求获取该用户的完整数据
• 将请求到的完整数据展示在模态框中

完整代码实现 #

let table;

// 初始渲染：仅展示用户名和查看按钮
const renderUserList = (userList) => {
  table.innerHTML = userList
    .map(({ id, name }) => `
      <tr>
        <td colspan="3">${name}</td>
        <td>
          <button class="more" data-id="${id}">
            <span class="material-symbols-outlined">visibility</span>
          </button>
        </td>
      </tr>
    `)
    .join("");
};

// 通过user_id获取单个用户的完整信息
const fetchUserDetail = async (userId) => {
  try {
    const response = await fetch(`https://your-api-url/users/${userId}`); // 替换为你的单用户API地址
    if (!response.ok) throw new Error('获取用户信息失败');
    return await response.json();
  } catch (error) {
    console.error(error);
    alert('加载用户详情出错，请稍后重试');
    return null;
  }
};

// 加载用户列表
const loadUserList = async () => {
  try {
    const response = await fetch("https://your-api-url/users"); // 替换为你的用户列表API地址
    if (!response.ok) throw new Error('获取用户列表失败');
    const userList = await response.json();
    renderUserList(userList);
  } catch (error) {
    console.error(error);
    alert('加载用户列表出错，请稍后重试');
  }
};

// 页面初始化
window.addEventListener("DOMContentLoaded", () => {
  table = document.getElementById('table');
  
  // 监听查看按钮点击事件
  table.addEventListener("click", async (e) => {
    const targetBtn = e.target.closest("button.more");
    if (!targetBtn) return;

    const userId = targetBtn.dataset.id;
    const userDetail = await fetchUserDetail(userId);
    
    if (userDetail) {
      // 将用户详情填充到模态框
      document.getElementById("modal-name").textContent = userDetail.name;
      document.getElementById("modal-email").textContent = userDetail.email;
      document.getElementById("modal-gender").textContent = userDetail.gender;
      document.getElementById("modal-status").textContent = userDetail.status;
      $('#myModal').modal('show'); // 假设使用Bootstrap模态框
    }
  });

  // 初始加载用户列表
  loadUserList();
});

关键改进点 #

• 移除了按钮上冗余的data属性，只保留data-id，减少不必要的数据存储
• 使用async/await替代链式then，代码逻辑更清晰易读
• 增加了错误处理，在API请求失败时给出提示，提升用户体验
• 严格遵循需求：点击按钮时才通过user_id请求完整用户信息，而不是提前加载所有数据

内容的提问来源于stack exchange，提问作者Apurav Sharma