如何修复此错误：无法在 Javascript 中读取未定义的属性（读取“长度”）答案

【问题标题】：How to fix this error : Cannot read properties of undefined (reading 'length') in Javascript如何修复此错误：无法在 Javascript 中读取未定义的属性（读取“长度”）
【发布时间】：2021-12-08 19:38:21
【问题描述】：

我是 Javascript 新手。为什么这段代码给了我错误：Cannot read properties of undefined (reading 'length')？我之前尝试过添加 datasrc 代码，但它不起作用。有没有人知道如何解决它？

//implement css in this files
import './style.css';

//jquery already imported
import $ from 'jquery';
// ajax to load

// do table data binding here using data from variable resultArr
var myArray = []

$.ajax({
    method:'GET',
    url:'https://www.seetrustudio.com/data.php',
    success:function(response){
        myArray = response.data
        buildTable(myArray)
        console.log(myArray)
    }
})
function buildTable(data){
    var table = document.getElementById('myTable')

    for (var i = 0; i < data.length; i++){
        var row = `<tr>
                        <td>${data[i].date}</td>
                        <td>${data[i].weather}</td>
                        <td>${data[i].temperature}</td>
                        <td>${data[i].temp_unit}</td>
                  </tr>`
        table.innerHTML += row


    }
}`

【问题讨论】：

在您的成功回调中，您已将myArray 分配给response.data。由于response 没有data 字段，myArray 将是undefined，因此，传递给buildTable 的data 也将是未定义的。所以如果你只是在你的ajax成功回调中使用myArray = response，一切都会正常工作。 对于您的下一个问题，我建议您使用 console.log 打印变量分配和 API 响应的结果，以便跟踪您的代码并轻松找到问题的根源:)

标签： javascript arrays ajax

【解决方案1】：

您的代码中只有一处使用了length：data.length in for 循环。

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

因此，解释器告诉I cannot read length of undefined，因此data 未定义，因此myArray 和response.data 未定义，您应该在线设置断点

myArray = response.data

并查看响应中的内容，以及为什么它不包含密钥 data。

【讨论】：