时间戳

首页 > 解决方案 > 无法将列表项添加到 HTML 文档

javascript - 无法将列表项添加到 HTML 文档

问题描述

我正在使用fetch()命令来获取 JSON 格式的数据数组。我正在使用函数fetchURL()来获取 JSON 格式的数据。我用async-await. 然后在收到的每个数据中，我试图将它的login字段添加到我在 HTML 文件中创建的有序列表中。

我创建了一个createListItem()函数来查找 HTML 文件中的有序列表标签并将其附加到该login字段中。但首先我尝试将所有login字段存储在一个数组arr中。但我无法将login字段存储在其中。

但是当我直接使用createListItem()函数创建一个带有登录“字段作为文本的列表项时，我能够将这些字段添加到有序列表中，因此我得到了有序列表。我正在注释掉那些让我直接在浏览器上输出的行当我不将login字段存储在以下窗口时arr：

代码：

function createListItem(text) {
  const parent = document.getElementsByTagName("ol");
  const entry = document.createElement("li");
  entry.textContent = text;
  parent[0].appendChild(entry);
}
const url = "https://api.github.com/users ";
async function fetchURL() {
  return (await fetch(url)).json();
}
let arr = [];
async function createList() {
  const data = await fetchURL();
  for (let i = 0; i < data.length; i++) {
    //createListItem(`${data[i].login}`);
    arr.push(data[i].login);
  }
}
createList();

标签： javascriptdomasync-awaitfetch

解决方案

您只需一个异步函数即可实现您的目标：

const url="http://jsonplaceholder.typicode.com/users";

async function getList(u){
  const arr=(await fetch(u).then(r=>r.json())).map(e=>e.username);
  document.querySelector("ol").innerHTML=arr.map(u=>`<li>${u}</li>`).join("");
  console.log(arr);
}

getList(url);
<h2>List of login names</h2>
<ol></ol>
<p>end of page</p>

在上面的代码片段中，我使用了 typicode.com 提供的公共资源并提取了属性 ofusername而不是login.

推荐阅读