调用自有API获取数组时报Uncaught TypeError: data is undefined求助

错误原因 #

• API返回的JSON结构根节点下存储用户列表的字段是all，你代码中错误取值response.data，该字段不存在，导致传入buildTable的参数为undefined，触发控制台类型错误。
• 渲染表格时你使用的字段名first_name、last_name和接口实际返回的小驼峰字段firstName、lastName不匹配，即便修复第一个错误也会出现空值渲染问题。

修复步骤 #

1. 调整业务逻辑代码 #

修改后的JS逻辑如下：

var myArray = []

$.ajax({
  method: 'GET',
  url: 'My-Servers-API',
  success: function(response) {
    // 调整为对应接口返回的字段名
    myArray = response.all
    buildTable(myArray)
    console.log(myArray)
  }
})

function buildTable(data) {
  var table = document.getElementById('myTable')
  // 增加非空校验，避免接口异常时页面报错
  if (!data || !Array.isArray(data)) return
  for (var i = 0; i < data.length; i++) {
    // 调整字段名和接口返回一致
    var row = `<tr>
                    <td>${data[i].firstName}</td>
                    <td>${data[i].lastName}</td>
                    <td>${data[i].email}</td>
              </tr>`
    table.innerHTML += row
  }
}

2. 抽离为独立JS文件 #

你可以按以下操作把JS逻辑从HTML中分离：

• 新建一个后缀为.js的文件（比如命名为userListRender.js），把上面修改后的JS代码全部复制进去保存。
• 删除原HTML中内嵌的JS代码，在jQuery引入标签的下方新增外部JS引入标签，代码如下：

<script src="./userListRender.js"></script>

注意引入路径要和你实际保存JS文件的路径对应

内容的提问来源于stack exchange，提问作者Julius Krüger