将js对象从控制台显示到html页面
将js对象从控制台显示到html页面
提问于 2021-11-01 11:46:32
我正在学习api和使用fetch的请求。我是一名学生。我不知道为什么当我像我的老师那样做的时候，一切都很顺利，但是当我不得不调整代码来适应我的个人工作时，它并没有像我期望的那样工作；哈哈…
我想在网页上显示我的请求结果，我可以在我的控制台中获得数组，但不能在我的网页上显示它。有没有人能帮我找个解决方案。谢谢！致以问候。
const url = 'https://reqres.in/api/users?page=2';异步函数getUsers() { const request = await fetch(url，{ method：'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()；
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-11-01 13:24:40
顺便说一句，您不能只是在textContent中显示或注入整个object数据。datas.data[0]是数据的object。你可以做的是：-
A.只需选择一个要显示的数据
document.querySelector('.users').textContent = datas.data[0].emailB.只需注入整个新的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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69796476
复制相关文章
相似问题
腾讯云开发者
