用纯 JavaScript 加载多个 JSON 文件

Question

我是 JavaScript 的新手。我已经了解如何使用 JSON.Parse() 从 JSON 文件创建对象，现在我需要将多个本地 JSON 加载到数组中。我一直在谷歌上搜索我的问题，但我发现的一切都与单个 JSON 文件有关。

有没有办法在没有任何库（如 jQuery 等）的情况下在纯 JavaScript 中做到这一点？

PS：无需使用网络服务器，否则代码在本地运行。

Answer 1

为此，您需要首先获取实际文件。然后，您应该解析它们。

// we need a function to load files
// done is a "callback" function
// so you call it once you're finished and pass whatever you want
// in this case, we're passing the `responseText` of the XML request
var loadFile = function (filePath, done) {
    var xhr = new XMLHTTPRequest();
    xhr.onload = function () { return done(this.responseText) }
    xhr.open("GET", filePath, true);
    xhr.send();
}
// paths to all of your files
var myFiles = [ "file1", "file2", "file3" ];
// where you want to store the data
var jsonData = [];
// loop through each file
myFiles.forEach(function (file, i) {
    // and call loadFile
    // note how a function is passed as the second parameter
    // that's the callback function
    loadFile(file, function (responseText) {
        // we set jsonData[i] to the parse data since the requests
        // will not necessarily come in order
        // so we can't use JSONdata.push(JSON.parse(responseText));
        // if the order doesn't matter, you can use push
        jsonData[i] = JSON.parse(responseText);
        // or you could choose not to store it in an array.
        // whatever you decide to do with it, it is available as
        // responseText within this scope (unparsed!)
    }
})

如果您不能发出 XML 请求，您还可以使用文件读取器对象：

var loadLocalFile = function (filePath, done) {
    var fr = new FileReader();
    fr.onload = function () { return done(this.result); }
    fr.readAsText(filePath);
}