Javascript，无法读取未定义的属性，但打印到控制台

Question

我有一个 jQuery 调用，它将数据获取到对象中。 我尝试使用对象值将 javascript 设置为标签文本，但它抛出

"Cannot read property '0' of undefined."

成功地将值打印到控制台。

var questionData;
var optionData;

$(document).ready(function () {    
    $.ajax({
        url: 'coaching-assessment-tool.aspx/GetCATQuestionAndOptions',
        type: 'POST',
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        success: function (data) {            
            questionData = data.d[0];
            optionData = data.d[1];           
            console.log(questionData[0].QuestionText);
            console.log("Question Data", questionData);
            console.log("Option Data", optionData);
        },
        error: function (error) {
            console.log(error);
            alert('Error retrieving data. Please contact support.');
        }        
    });
    document.getElementById('firstQuestion').innerHTML = questionData[0].QuestionText;
});

我需要标签文本作为对象值(questionData[0].QuestionText)。

Answer 1

$.ajax() is asynchronous by default ，因此设置 innerHTML 是在填充 questionData 之前发生的。将第 22 行移至成功回调内，以确保数据在使用前可用。

虽然技术上可以使调用同步，但这是一个坏主意。

$.ajax({
   // ...
   async: false,
   // ...
});

该代码将阻止任何其他 JavaScript 执行，直到 ajax 调用完成。

顺便说一句，一些 JavaScript 工具，例如 TypeScript可以帮助您在代码在浏览器中执行之前捕获这些错误。我最近将一些 JS 转换为 TS，并且对我发现的错误数量非常感到满意。

干杯!