用纯 JavaScript 加载多个 JSON 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28690096/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Load multiple JSON files in pure JavaScript
提问by Max
I am new to javaScript. I have already understood how to create object from JSON-file with JSON.Parse() and now I need to load multiple local JSONs into array. I've been googling my problem for a while, but everything that I found was related to single file. Is there any way to do this in pure JS without any libraries like jQuery and etc.?
我是 JavaScript 的新手。我已经了解如何使用 JSON.Parse() 从 JSON 文件创建对象，现在我需要将多个本地 JSON 加载到数组中。我一直在谷歌上搜索我的问题，但我发现的一切都与单个文件有关。有没有什么方法可以在没有任何库（如 jQuery 等）的情况下在纯 JS 中做到这一点？
P.S.: There is no need to work with web-server or else, the code is running locally.
PS：无需使用网络服务器，否则代码在本地运行。
回答by royhowie
To do this, you need to first get the actual files. Then, you should parse them.
为此，您需要首先获取实际文件。然后，您应该解析它们。
// 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!)
}
})
If you can't make an XML Request, you can also use a file reader object:
如果您不能发出 XML 请求，您还可以使用文件读取器对象：
var loadLocalFile = function (filePath, done) {
var fr = new FileReader();
fr.onload = function () { return done(this.result); }
fr.readAsText(filePath);
}
回答by jaibatrik
The following pseudo-code snippet might help you -
以下伪代码片段可能对您有所帮助-
var myArray = [];
for(... loop through your files ...) {
myArray.push(JSON.parse(your_file);
}
回答by winhowes
You can do something like this:
你可以这样做：
var file1 = JSON.parse(file1);
var file2 = JSON.parse(file2);
var file3 = JSON.parse(file3);
var myFileArray = [file1, file2, file3];
// Do other stuff
// ....
// Add another file to the array
var file4 = JSON.parse(file4);
myFileArray.push(file4);
If you already have an array of un-parsed files you could do this:
如果您已经有一组未解析的文件，您可以这样做：
var myFileArray = [];
for(var i=0; i<unparsedFileArray.length; i++){
myFileArray.push(JON.parse(unparsedFileArray[i]));
}
