未捕获的类型错误：无法读取未定义 Javascript 的属性“长度”答案

【问题标题】：Uncaught TypeError: Cannot read property 'length' of undefined Javascript未捕获的类型错误：无法读取未定义 Javascript 的属性“长度”
【发布时间】：2020-04-19 15:52:28
【问题描述】：

我遇到了一个问题，我无法在 javascript 中调用 .length() 方法到数据数组。目的是能够遍历日期时间字符串数组，以便将它们转换为 javascript 中的日期对象。这是我的代码。

我的数据：

HTTP 200 OK
Allow: GET, HEAD, OPTIONS
Content-Type: application/json
Vary: Accept

{
  "sales_time_axis": [
    [
      "2019-12-29T10:42:25Z"
    ],
    [
      "2019-12-23T03:13:03Z"
    ],
    [
      "2019-12-23T02:50:51Z"
    ]
  ],

ajax 调用：

$.ajax({
  type: "GET",
  url: endpoint,    
  success: function(data) {
    window.sales_time = data.sales_time_axis
  },
  error: function(error_data) {
    console.log('error')
    console.log(error_data)
  }
})

for 循环：

var sales_time;
var date_array = []

for(i = 0 ; i < sales_time.length ; i++){
  date_array.push(new Date(sales_time[i]))
}

console.log(data_array)

我已将 sales_time 声明为全局变量，但出现此错误：

(index):179 Uncaught TypeError: Cannot read property 'length' of undefined
at (index):179

您的帮助将不胜感激！

【问题讨论】：

你还需要全局变量是数组，如var sales_time=[];
@kelvinkantaria——在回调中分配了一个数组，问题是异步调用。将 sales_time 初始化为空数组会消除错误，但不会解决异步问题。

标签： javascript arrays ajax date

【解决方案1】：

正如其他人所指出的，ajax 是一个异步进程。 ajax 之外的任何东西都会同步运行，这意味着它不会等待您的数据到来。您可以做到这一点的一种方法是将迭代方法作为回调放在 ajax 成功方法中，并将数据作为其参数。

$.ajax({
    // SOME CONFIGS HERE
    success: function(result){
        iterate(result);
    }
});

function iterate(data){
    // Do your iteration here
}

或者如果你坚持使用全局变量thingy，那么你可以这样做

// Assuming all these are inside the same javascript file

var data = []; // Make this a global value inside your file 

$.ajax({
    // SOME CONFIGS HERE
    success: function(result){
        data = result.data;
        iterate(); // Get data, then hit the iterate process
    }
});

function iterate(){
    // Do your iteration here
    data.forEach(() => { // Some process in here });
}

只有在调用成功完成后，此方法才会调用迭代。不要尝试在成功方法之外调用迭代，否则您肯定会得到一个空数组。

如果您的流程依赖于先完成的承诺，那么您编写代码的心态就必须改变。只有在 promise 解决后，您才需要执行下一步，而不是在 promise 仍未解决时简单地运行它。

【讨论】：

【解决方案2】：

你需要先等待ajax调用，因为它是异步的

看看下面的链接： How to await the ajax request?

【讨论】：

【解决方案3】：

您可能正面临异步变量分配问题。尝试将 for 循环与成功回调放在一起，并迭代在回调参数上接收到的同一个 sales_time 变量。

$.ajax({
  type: "GET",
  url: endpoint,    
  success: function(data){
    var sales_time = data.sales_time_axis;
    var date_array = []
    for(i = 0 ; i < sales_time.length ; i++){
      date_array.push(new Date(sales_time[i]))
    }
    console.log(data_array)
  },
  error: function(error_data){
    console.log('error')
    console.log(error_data)
  }
})

【讨论】：

是的，将 for 循环放入 ajax 函数效果很好，但是我仍然需要能够将这个 date_array 从 ajax 成功回调中取出，以便能够操纵我的图表，你有吗？知道如何做到这一点？
您需要在回调中调用另一个函数来更新您的图表。另一种方法是使用事件侦听器。您在侦听器上更新图表，然后在成功回调上触发此事件，将 date_array 作为参数传递。