javascript - 无法读取未定义 AJAX 的属性 'length'

Question

我已经彻底搜索了这个问题，但我的代码中没有得到任何结果。

我这里有一个简单的 JSON 解析器，它根据端点返回的 JSON 对象创建一个表。这是我到目前为止所尝试过的。

function getAJAXData(APIurl){
$.ajax({
    url: APIurl,
    type: "GET",
    dataType: "json"
}).then(function(data){
    alert(data);
});
}

function generateTable(tableId){

var objRecords = getAJAXData("http://jsonplaceholder.typicode.com/posts");
var cols = addTableHeaders(objRecords, tableId);

for(var i = 0; i < objRecords.length; i++){

    var tRow = $('<tr/>');

    for (var colIdx = 0; colIdx < cols.length ; colIdx++){

        var cellVal = objRecords[i][cols[colIdx]];

        cellVal = (cellVal == null) ? "" : cellVal; 

        tRow.append($('<td/>').html(cellVal)); 
    }
    $(tableId).append(tRow);
}
}

function addTableHeaders(myList, tableId){
var colSet = [];
var headers = $('<tr/>');

for (var i = 0; i < myList.length; i++) {
    var hRow = myList[i];
    for(var key in hRow){
        if($.inArray(key, colSet) == -1){
            colSet.push(key);
            headers.append( $('<th/>').html(key) );
        }
    }
}
$(tableId).append(headers);

return colSet;
}

那个不起作用，但是当我对列表进行硬编码时，它会从硬编码列表中生成一个表。有人可以解释我在代码中做错或遗漏了什么吗？谢谢。

Answer 1

这两行是一个问题:

var objRecords = getAJAXData("http://jsonplaceholder.typicode.com/posts");
var cols = addTableHeaders(objRecords, tableId);

首先，您的 getAJAXData 函数不会返回任何内容，因此 objRecords 将始终未定义。

其次，即使它确实返回了某些内容，它也是一个异步调用，因此数据不会立即准备好。

您需要做的是将代码的相关部分包装到一个函数中，并在成功回调上调用它，以便它仅在您的 AJAX 数据准备好后才执行。