如何将fetch请求返回的JS对象从控制台输出展示到HTML页面

AI 小北

2026-9-28

问题原因

你代码的核心问题是：datas.data[0] 是一个用户信息对象，直接赋值给 textContent 时，浏览器会自动把对象转为字符串 [object Object]，所以看不到实际内容，控制台能打印是因为控制台会自动展开对象结构。

解决步骤

先确认页面上存在类名为 users 的DOM元素，比如HTML里要有类似 <div class="users"></div> 的结构，否则 querySelector 会返回null，赋值操作会直接报错。
要取对象里的具体属性拼接内容，不要直接赋值整个对象。reqres.in返回的用户对象包含id、email、first_name、last_name、avatar这些属性，你可以按需选取拼接。
如果要展示所有用户，循环遍历datas.data数组即可，不用只取下标为0的第一个用户。

修改后参考代码

const url = 'https://reqres.in/api/users?page=2';

async function getUsers() {
  const request = await fetch(url, {
    method: 'GET',
  });

  if (!request.ok) {
    alert("请求出错了！");
  } else {
    let datas = await request.json(); 
    const userList = datas.data;
    const userContainer = document.querySelector('.users');
    // 方案1：仅展示第一个用户的纯文本信息
    // userContainer.textContent = `姓名：${userList[0].first_name} ${userList[0].last_name} 邮箱：${userList[0].email}`;
    
    // 方案2：展示所有用户，带简单排版
    let contentStr = '';
    userList.forEach(user => {
      contentStr += `<p>姓名：${user.first_name} ${user.last_name} | 邮箱：${user.email}</p>`
    })
    userContainer.innerHTML = contentStr;
    console.log(userList);
  }
}

getUsers();