使用JavaScript Ajax获取JSON API数据时遇undefined错误，求解决

嘿，我看你遇到的问题其实是两个关键点没处理好：API返回的是用户数组而不是单个对象，而且你的HTML表格只准备了一行，没法容纳多个用户数据。咱们一步步来修复：

问题根源 #

• 你调用的https://jsonplaceholder.typicode.com/users返回的是一组用户对象（数组形式），不是单个用户。所以你直接访问jsonObj.name时，数组本身没有name属性，自然会返回undefined。
• 你的HTML里只硬编码了一行<tr>，但API返回了10个用户，需要动态生成每一行数据。

修复方案 #

第一步：调整HTML结构 #

先把表格的主体部分留空，用一个<tbody>来承载动态生成的行：

<html>
<body>
  <table class="src" border="1"> <!-- 加border是为了方便看到表格结构，可按需移除 -->
    <tr>
      <th>Name</th>
      <th>ID</th>
    </tr>
    <!-- 这里用来动态插入用户行 -->
    <tbody id="userTableBody"></tbody>
  </table>
</body>
</html>

第二步：修改JavaScript逻辑 #

遍历返回的用户数组，动态创建每一行的表格元素：

var xmlhttp = new XMLHttpRequest();
var url = "https://jsonplaceholder.typicode.com/users";

xmlhttp.onreadystatechange = function(e) {
  if (this.readyState == 4 && this.status == 200) {
    // 解析返回的用户数组
    var users = JSON.parse(this.responseText);
    // 获取表格的tbody节点
    var tableBody = document.getElementById("userTableBody");
    
    // 遍历每个用户，生成表格行
    users.forEach(function(user) {
      // 创建一行<tr>
      var row = document.createElement("tr");
      
      // 创建Name单元格并赋值
      var nameCell = document.createElement("td");
      nameCell.textContent = user.name; // 用textContent比innerHTML更安全，避免XSS风险
      row.appendChild(nameCell);
      
      // 创建ID单元格并赋值
      var idCell = document.createElement("td");
      idCell.textContent = user.id;
      row.appendChild(idCell);
      
      // 把当前行添加到tbody里
      tableBody.appendChild(row);
    });
  }
};

xmlhttp.open("GET", url, true);
xmlhttp.send();

可选：简化的HTML字符串拼接方式 #

如果你的场景比较简单，也可以用模板字符串来快速生成HTML（注意：如果数据来自不可信来源，这种方式有XSS风险，优先用上面的DOM创建方式）：

// 替代forEach里的DOM创建逻辑
var tableHtml = "";
users.forEach(function(user) {
  tableHtml += `<tr><td>${user.name}</td><td>${user.id}</td></tr>`;
});
tableBody.innerHTML = tableHtml;

额外小技巧 #

下次遇到数据结构不确定的情况，可以在JSON.parse之后加一句console.log(users)，打开浏览器的开发者工具（F12）看控制台，就能清楚看到返回的数据是数组还是单个对象，以及每个对象的属性名是什么啦。

内容的提问来源于stack exchange，提问作者AwaisHassan