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() 默认情况下是异步的，因此innerHTML在questionData填充之前进行设置。在成功回调中移动第 22 行以确保数据在使用前可用。虽然在技术上可以使调用同步，但这是一个坏主意。$.ajax({   // ...    async: false,   // ...});该代码将阻止任何其他 JavaScript 执行，直到 ajax 调用完成。顺便说一句，像TypeScript这样的 JavaScript 工具可以帮助您在代码在浏览器中执行之前发现这些错误。我最近将一些 JS 转换为 TS 并且对我捕获的错误数量感到非常满意。