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

Question

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

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

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

异步函数 getUsers() { const request = await fetch(url, { 方法：'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();

Answer 1

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

一个。随便选一个数据显示

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

乙。只需注入全新的 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>
`

摄氏度。注入所有可用数据

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

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

Display a js object from the console to the html page

fetch

display

一个。随便选一个数据显示

乙。只需注入全新的 HTML

摄氏度。注入所有可用数据