無法將列表項添加到 HTML 文檔

Question

我正在使用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();

Answer 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);
    });
});

Answer 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>

在上面的代碼片段中，我使用了 typicode.com 提供的公共資源並提取了username而不是login的屬性。