从控制台显示一个js对象到html页面

【问题标题】：Display a js object from the console to the html page从控制台显示一个js对象到html页面
【发布时间】：2021-12-16 03:47:15
【问题描述】：

我正在学习 api 并使用 fetch 请求。我是学生。我不明白为什么当我像我的老师一样做事时，一切都很顺利，但是当我不得不为我的个人工作调整代码时，它并没有像我预期的那样工作；哈哈……

我想在网页上显示我的请求结果，我可以在控制台中获取数组但无法在我的网页上显示它。有人可以帮我找到解决方案吗。谢谢！问候。

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

异步函数 getUsers() { 常量请求=等待获取（网址，{ 方法：'GET'， });

if (!request.ok) {
    alert("y'a une couille dans l'beurre!");
} else {
    let datas = await request.json(); // on récupère les données en json et on en fait un objet js;
    /* console.log(datas); */

    document.querySelector('.users').textContent = datas.data[0];
    console.log(datas.data);
}
// on va stocker fetch dans variable : const request;
//await veur dire qu'on va attendre fetch

}

getUsers();

【问题讨论】：

显示了什么？

标签： fetch display

【解决方案1】：

顺便说一句，您不能只将整个object 数据显示或注入textContent。 datas.data[0] 是 object 的数据。你可以做的是：-

A.只需选择一个要显示的数据

document.querySelector('.users').textContent = datas.data[0].email

B.只需注入全新的 HTML

document.querySelector('.users').innerHTML = `
 <h2>${datas.data[0].first_name} ${datas.data[0].last_name} (ID: ${datas.data[0].id})</h2>
 <p>${datas.data[0].email}</p>
`

C.注入所有可用数据

datas?.data?.map((item) => {
  let html = `
    <h2>${item?.first_name} ${item?.last_name} (ID: ${item?.id})</h2>
    <p>${item?.email}</p>
  `;
  document.querySelector(".users").insertAdjacentHTML("beforeend", html);
});

您可以在此处查看一个工作示例：https://codesandbox.io/s/thirsty-hypatia-n3cpn?file=/src/index.js:484-722

【讨论】：