无法将列表项添加到 HTML 文档答案

【问题标题】：Not able to add list items to HTML Document无法将列表项添加到 HTML 文档
【发布时间】：2021-12-19 01:17:06
【问题描述】：

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

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

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

代码：

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();

【问题讨论】：

标签： javascript dom async-await fetch

【解决方案1】：

您正在获取数组中的数据，您需要在调用createList()函数后创建列表：

createList().then(function(){
    arr.forEach(element => {
        createListItem(element);
    });
});

您还可以在createList 函数中定义arr 并返回，然后您的代码将如下所示：

async function createList() {
  let arr = [];
  const data = await fetchURL();
  for (let i = 0; i < data.length; i++) {
    //createListItem(`${data[i].login}`);
    arr.push(data[i].login);
  }
  return arr;
}
createList().then(arr=>{
    arr.forEach(element => {
        createListItem(element);
    });
});

【讨论】：

【解决方案2】：

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

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>

在上面的sn-p中我使用了typicode.com提供的公共资源，提取了username的属性，而不是login。

【讨论】：