javascript - 表不显示用户数据

Question

我正在尝试通过一个单独的 JS 文件构建一个表并将其绑定(bind)到我的 HTML。这是我的代码:

// Data for the "HTML Tables" Page

var users = [
  {
    first_name: "Kaitlin",
    last_name: "Burns",
    age: 23,
    email: "kburns99753@usermail.com"
  },
  {
    first_name: "Joshua",
    last_name: "Feir",
    age: 31,
    email: "josh319726@usermail.com"
  },
  {
    first_name: "Stephen",
    last_name: "Shaw",
    age: 28,
    email: "steve.shaw47628@usermail.com"
  },
  {
    first_name: "Timothy",
    last_name: "McAlpine",
    age: 37,
    email: "Timbo72469@usermail.com"
  },
  {
    first_name: "Sarah",
    last_name: "Connor",
    age: 19,
    email: "SarahC6320@usermail.com"
  }
];

window.onload = function() {
  loadTables();
};

function loadTables() {
  var selector = this.document.querySelector("#publicTable");
  var table = "";

  for (var i = 0; i < users.length; i++) {
    table += "<tr>" +
      "<td>" + users.first_name[i] + "</td>" +
      "<td>" + users.last_name[i] + "</td>" +
      "<td>" + users.age[i] + "</td>" +
      "<td><a href=\"mailto:" + users[i].email + "\">" + users[i].email + "</></td>" +
      "</tr>";
  }
  
  selector.innerHTML += table;
}

<table id="publicTable" border="1">
  <tr>
    <th> First Name </th>
    <th> Last Name </th>
    <th> Age </th>
    <th> Email </th>
  </tr>
</table>

但问题是，在我的网站中，尽管从 querySelector 调用表的 ID，但没有插入 JS 文件中的代码。

Answer 1

属性访问错误，应该是 users[i].first_name 遍历数组并访问每个对象属性。

您的函数应如下所示:

function loadTables(){

    var selector = this.document.querySelector("#publicTable");

    var table = "";

    for(var i = 0; i < users.length; i++){

        table += "<tr>" +
        "<td>" + users[i].first_name + "</td>" +
        "<td>" + users[i].last_name + "</td>" +
        "<td>" + users[i].age + "</td>" +
        "<td><a href=\"mailto:" + users[i].email + "\">" + users[i].email + "</></td>" +
        "</tr>";
    } 

    selector.innerHTML += table;
}