从嵌套JSON创建的JavaScript数组返回0表示长度
我对JavaScript还是很陌生，但我的程序的基本前提是进行API调用，然后将数据转换成表。我已经测试了从嵌套JSON创建的JavaScript数组返回0表示长度,javascript,Javascript,我对JavaScript还是很陌生，但我的程序的基本前提是进行API调用，然后将数据转换成表。我已经测试了buildHtmlTable函数，它可以很好地使用我预先填充了静态数据（不是来自API）的示例数组 在buildHtmlTable函数中console.log（myList.length）返回0。这很可能是问题的根源，因为如果长度为0，那么for（var i=0；i
buildHtmlTablebuildHtmlTableconsole.log（myList.length）.push<body onLoad="buildHtmlTable('#excelDataTable')">
<table id="excelDataTable" border="1">
</table>
</body>
<script>
var myList = [];
function getAPIData() {
// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest()
// Open a new connection, using the GET request on the URL endpoint
request.open('GET', '/api/table=1/records/', true)
request.onload = function () {
// Begin accessing JSON data here
var data = JSON.parse(this.response)
n = 0
if (request.status >= 200 && request.status < 400) {
data.forEach(record => {
myList[n] = (record.data);
n++;
//console.log(record.data.name)
})
} else {
console.log('error')
}
}
request.send()
console.log('fin')
}
// Builds the HTML Table out of myList.
function buildHtmlTable(selector) {
getAPIData()
console.log(myList.length)
console.log(1)
var columns = addAllColumnHeaders(myList, selector);
console.log(1.1)
console.log(myList.length)
for (var i = 0; i < myList.length; i++) {
console.log(1.2)
var row$ = $('<tr/>');
console.log(1.3)
for (var colIndex = 0; colIndex < columns.length; colIndex++) {
var cellValue = myList[i][columns[colIndex]];
if (cellValue == null) cellValue = "";
row$.append($('<td/>').html(cellValue));
}
$(selector).append(row$);
}
console.log(2)
}
// Adds a header row to the table and returns the set of columns.
// Need to do union of keys from all records as some records may not contain
// all records.
function addAllColumnHeaders(myList, selector) {
var columnSet = [];
var headerTr$ = $('<tr/>');
for (var i = 0; i < myList.length; i++) {
var rowHash = myList[i];
for (var key in rowHash) {
if ($.inArray(key, columnSet) == -1) {
columnSet.push(key);
headerTr$.append($('<th/>').html(key));
}
}
}
$(selector).append(headerTr$);
return columnSet;
}
</script>
[
{
"id": 1,
"data": {
"name": "John Doe",
"id": "5d7861f38319f297df433ae1"
}
},
{
"id": 2,
"data": {
"name": "John deer",
"id": "5d7861f38319f297df433ae1"
}
},
{
"id": 3,
"data": {
"name": "Jane Doe",
"id": "5d79126f48ca13121d673300"
}
}
]
async function getAPIData() {
const response = await fetch('/api/table=1/records/')
const myJson = await response.json();
myJson.forEach(record => {
myList.push(record.data);
})
}
XMLHttpRequests是异步的，这意味着您的其余代码在运行之前不会等待它们完成。当您调用
getAPIData（）buildHtmlTablebuildHtmlTablegetAPIDatabuildHtmlTable您还可以切换到使用
fetchXMLHttpRequestfetchasync/await