jQuery通过AJAX填充的对象数组无法访问属性且长度为0问题求助

问题原因 #

你遇到的问题由两个错误共同导致：

1. AJAX异步执行逻辑错误
   $.ajax默认是异步请求，你发起请求后，代码会继续往下执行，不会等接口返回结果。你在请求发起后立刻打印数组长度、访问属性时，success回调函数还没有触发，数组还没有被塞入数据，所以长度为0，访问不到属性。
   你在控制台看到数组内有数据，是因为浏览器控制台打印引用类型（数组、对象）时会懒加载展示内容，你点开数组查看的时间点，AJAX请求已经完成，success回调已经执行完把数据push进去了，不等于你执行打印代码的那一刻数组有值。

2. 数组访问语法错误
   gantt_data_array是对象数组，不是单个对象，你直接写gantt_data_array['startDate']是尝试从数组本身读取startDate属性，数组本身当然没有这个属性，自然返回undefined。你需要先指定数组的索引，取出对应位置的对象，再访问属性，比如访问第一个元素的startDate应该写gantt_data_array[0].startDate。

修复方案 #

把所有需要操作gantt_data_array的逻辑，都放到AJAX请求的success回调内，确保操作执行时数据已经被正确塞入数组：

var gantt_data_array = [];
var get_data = $.ajax({    
    url: "/Gantt/Read_Gantt",    
    success: function (result) {
        $.each(result, function (d, v) {   
            gantt_data_array.push({
                "startDate": v.Commencement_Date,
                "endDate": v.End_Date,
                "taskName": v.Vessel_Name,
                "status": v.Firm_Status
            });
        })
        // 所有对gantt_data_array的操作都放在这里执行
        console.log(gantt_data_array.length); // 返回正确的数组长度
        console.log(gantt_data_array[0].startDate); // 正确读取第一个元素的startDate属性
    },
    error: function (xhr, status, error) {
        console.log("error")
    }
});

如果有业务逻辑需要在请求完成后在其他位置执行，也可以使用jQuery ajax的Promise链式调用写法，或者自定义回调函数来处理，核心原则就是不能在AJAX请求发起后立刻读取数组，必须等待请求完成的通知后再操作。

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