Question

所以我正在做的是从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的新手。感谢

Answer 1

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

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

Answer 2

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

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

当它不是时，数组是空的...... JavaScript

2 个答案: