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

Question

我有一个jQuery调用正在将数据输入到对象中。 我正在尝试使用对象值将javascript设置为标签文本，但是会抛出

  

“无法读取未定义的属性'0'。”

将值成功打印到控制台的位置。

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调用完成。

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

干杯！