从 Javascript 输出 HTML table 时出现问题

Question

我正在尝试从外部 json 文件中引入数据，并使用它来生成 table。我运行在第 52 行 'Uncaught TypeError: Cannot convert undefined or null to object at Function.keys' 遇到了问题。当我注释掉前 2 个异步函数时，使用 'mountains' 变量中的示例数据并引用 'mountains' 而不是 html table 按预期生成的用户。我认为问题与我的第二个异步功能有关，但我是一个不知所措的新手。任何帮助表示赞赏！

async function getUsers() {
    let url = '../assets/names.json';
    try {
        let res = await fetch(url);
        return await res.json(); 
    } catch (error) {
        console.log(error)
    }
}

async function users() {
    
    let users = await getUsers()                        
 
}


/* let mountains = [
    { name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" },
    { name: "Monte Falterona", height: 1654, place: "Parco Foreste Casentinesi" },
    { name: "Poggio Scali", height: 1520, place: "Parco Foreste Casentinesi" },
    { name: "Pratomagno", height: 1592, place: "Parco Foreste Casentinesi" },
    { name: "Monte Amiata", height: 1738, place: "Siena" }
  ];
  */



  function generateTableHead(table, data) {
    let thead = table.createTHead();
    let row = thead.insertRow();
    for (let key of data) {
      let th = document.createElement("th");
      let text = document.createTextNode(key);
      th.appendChild(text);
      row.appendChild(th);
    }
  }
  
  function generateTable(table, data) {
    for (let element of data) {
      let row = table.insertRow();
      for (key in element) {
        let cell = row.insertCell();
        let text = document.createTextNode(element[key]);
        cell.appendChild(text);
      }
    }
  }
  
  let table = document.querySelector("table");
  let data = Object.keys(users[0]);
  generateTableHead(table, data);
  generateTable(table, users);

Answer 1

由于fetch是异步的，你只需要处理一次数据fetch收到它

这应该会给你一个想法

async function getUsers() {
    let url = '../assets/names.json';
    try {
        let res = await fetch(url);
        return res.json();
    } catch (error) {
        console.log(error);
    }
}
async function fakeGetUsers() {
    // fake delay
    await new Promise(res => setTimeout(res, 1000));
    // simulate return res.json();
    return [{name:"Monte Falco",height:1658,place:"Parco Foreste Casentinesi"}, {name:"Monte Falterona",height:1654,place:"Parco Foreste Casentinesi"}, {name:"Poggio Scali",height:1520,place:"Parco Foreste Casentinesi"}, {name:"Pratomagno",height:1592,place:"Parco Foreste Casentinesi"}, {name:"Monte Amiata",height:1738,place:"Siena"}];
}
async function users() {
    const users = await fakeGetUsers();
    // here you can use the data
    function generateTableHead(table, data) {
        let thead = table.createTHead();
        let row = thead.insertRow();
        for (let key of data) {
            let th = document.createElement("th");
            let text = document.createTextNode(key);
            th.appendChild(text);
            row.appendChild(th);
        }
    }

    function generateTable(table, data) {
        for (let element of data) {
            let row = table.insertRow();
            for (key in element) {
                let cell = row.insertCell();
                let text = document.createTextNode(element[key]);
                cell.appendChild(text);
            }
        }
    }

    const table = document.querySelector("table");
    const data = Object.keys(users[0]);
    generateTableHead(table, data);
    generateTable(table, users);
}
users();

<table></table>

从 Javascript 输出 HTML table 时出现问题

Problem outputting HTML table from Javascript

javascript

html-table

javascript-objects