当它不是时，数组是空的...... JavaScript [重复]

Posted 2021-04-16

这个问题在这里已有答案：

• Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference 6个答案

所以我正在做的是从json文件获取值并将它们推送到一个数组，以便我可以随机选择一个，它显示在一个html文件中。我遇到的问题是，即使数组中存在某些内容，它也会将其视为空的...

var quotes = [];
var authors = [];

function loadJSON(callback) {   

    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', 'quotes.json', true); 
    xobj.onreadystatechange = function () {
        if (xobj.readyState == 4 && xobj.status == "200") {
        // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
            callback(xobj.responseText);
        }
    };
    xobj.send(null);  
}

function init() {
    loadJSON(function(response) {
        // Parse JSON string into object
        var data = JSON.parse(response);
        for(var i in data){
            var key = i;
            var val = data[i];
            quotes.push(key);
            authors.push(val);
        }
    });
}

init();

var index = Math.floor(Math.random()* (quotes.length + 1));

document.getElementById("p1").innerHTML = "<span class="quotes">&ldquo;</span>" + quotes[index] + "<span class="quotes">&rdquo;</span>" + "<span id="author">" + " – " + authors[index] + "</span";

所以在我的init函数中，它将键和val推送到一个数组，但它将它视为空的...我很抱歉，如果这是一个简单的问题，但我是JSON的新手。谢谢

答案

我认为您的问题是，在init中的工作实际完成之前，您正在执行代码的最后两行（在调用init函数之后）。

换句话说，就像你对init所做的那样，将回调传递给loadJSON，然后在其中执行最后2行。

另一答案

正如Xufox指出的那样，你正在处理异步代码，当getElementById运行你的数据请求还没有完成时，你最终得到了一个用于innerHTML的空数组。

这与你的问题无关，但无法使用for ... in作为much as you can when dealing with arrays，更喜欢旧学校for，或者，如果你使用Babel，for of。