Javascript 在一个函数中使用来自两个单独JSON文件的数据

我在main.js文件的函数中尝试访问两个本地JSON文件。只要一个JSON文件，一切都正常，但我不确定如何合并第二个JSON文件。理想情况下，像

data\u set1=$.getJSON（“file1.json”）

这样的东西可以很好地工作，但我看到类似的问题已经被反复问过，而且由于异步调用，这不一定是可能的（我不完全理解这些问题的所有答案）

这就是它的工作原理：

$.getJSON("data.json", function(json){

    var data_points = [];
    for (i = 0; i < json.length; i++){
        data_points.push([json[i].name, json[i].age]);
    }

    $(function () {
       //do stuff with data_points

$.getJSON（“data.json”），函数（json）{
var数据_点=[]；
for（i=0；i

---

但是我不知道如何合并第二个JSON调用，为最后使用的函数创建另一个列表。

ajax请求是对一个资源的一个请求。不能用同一个请求获取两个不同的资源。您可能需要两个请求：

var completed = 0;

$.getJSON('file1.json', function(json) {
    completed++;
    if (completed == 2) { all_done(); }
}
$.getJSON('file2.json', function(json) {
    completed++;
    if (completed == 2) { all_done(); }
}

function all_done(...) { ... }

或者在服务器上将两个json文件合并为一个：

{"file1":{data from file one here}, "file2":{data from file two here}}

---

并在代码中以

数据.file1

和

数据.file2

的形式访问它们。

ajax请求是对一个资源的一个请求。不能用同一个请求获取两个不同的资源。您可能需要两个请求：

var completed = 0;

$.getJSON('file1.json', function(json) {
    completed++;
    if (completed == 2) { all_done(); }
}
$.getJSON('file2.json', function(json) {
    completed++;
    if (completed == 2) { all_done(); }
}

function all_done(...) { ... }

或者在服务器上将两个json文件合并为一个：

{"file1":{data from file one here}, "file2":{data from file two here}}

---

并在代码中以

data.file1

和

data.file2

的形式访问它们。

您可以设置一个var来指示文件已加载，并在检查状态时调用相同的函数。根据JSON中的数据量，这可能不是一个好主意

var xFileLoaded = false, yFileLoaded = false;
var xFile, yFile;

$.getJSON("data.json", function(json){
    xFile = json;
    xFileLoaded = true;
    doSomething();
});

$.getJSON("data.json", function(json){
    yFile = json;
    yFileLoaded = true;
    doSomething();
});

function doSomething() {
    if(xFileLoaded && yFileLoaded) {
        // good to go
    }
}

---

您可以只设置一个var来指示文件已加载，并在检查状态时调用相同的函数。根据JSON中的数据量，这可能不是一个好主意

var xFileLoaded = false, yFileLoaded = false;
var xFile, yFile;

$.getJSON("data.json", function(json){
    xFile = json;
    xFileLoaded = true;
    doSomething();
});

$.getJSON("data.json", function(json){
    yFile = json;
    yFileLoaded = true;
    doSomething();
});

function doSomething() {
    if(xFileLoaded && yFileLoaded) {
        // good to go
    }
}

---

您可以使用jQuery延迟加载

var xFile, yFile;

var requestX = $.getJSON("data1.json", function(json){
    xFile = json;
});

var requestY = $.getJSON("data2.json", function(json){
    yFile = json;
});

$.when(requestX, requestY).then(function(){
   // do something;
   // this function only gets called when both requestX & requestY complete.
});

---

签出

您可以使用jQuery延迟加载

var xFile, yFile;

var requestX = $.getJSON("data1.json", function(json){
    xFile = json;
});

var requestY = $.getJSON("data2.json", function(json){
    yFile = json;
});

$.when(requestX, requestY).then(function(){
   // do something;
   // this function only gets called when both requestX & requestY complete.
});

---

请使用与@MarcB的解决方案非常相似的方法查看，我会将文件保存在一个数组中，并稍微概括一下：

var files = ["file1.json", "file2.json"];
var results = {};
var completed = 0;

function afterEach(fileName, json) {
    results[fileName] = json;
    if (++completed >= files.length) {
        afterAll();
    }
}

files.forEach(function (file) {
    $.getJSON(file, afterEach.bind(this, file));
});

---

这将并行请求所有文件，允许浏览器选择实际打开和下载的连接数。每次完成后，结果（

json

）将放在文件名下的散列中存储。所有文件完成后（假设

文件

不变），然后调用

函数。
使用非常类似于@MarcB的解决方案，我会将文件保存在一个数组中，并稍微概括一下：

var files = ["file1.json", "file2.json"];
var results = {};
var completed = 0;

function afterEach(fileName, json) {
    results[fileName] = json;
    if (++completed >= files.length) {
        afterAll();
    }
}

files.forEach(function (file) {
    $.getJSON(file, afterEach.bind(this, file));
});

这将并行请求所有文件，允许浏览器选择实际打开和下载的连接数。每次完成后，结果（
json
）将放在文件名下的散列中存储。所有文件完成后（假设
文件
不变），然后调用
函数。
jquery提供了一种优雅的方法：

$.when(
    $.ajax({
        url: 'file1.json/',
        success: function(data) {
            // Treatement
        }
    }),
    $.ajax({
        url: 'file2.json',
        success: function(data) {
            // Treatement
        }
    })
).then( function(){
    // Two calls are completed
});

完成这两个调用后，您可以在块“then”中执行任何操作。
jquery提供了一种优雅的方法：

$.when(
    $.ajax({
        url: 'file1.json/',
        success: function(data) {
            // Treatement
        }
    }),
    $.ajax({
        url: 'file2.json',
        success: function(data) {
            // Treatement
        }
    })
).then( function(){
    // Two calls are completed
});

一旦这两个调用完成，您就可以在“then”块中执行任何操作.
@mplungjan:仍然有两个调用。这实际上是并行调用，而不是强制执行顺序调用。它们确实不是大文件，这是一次性任务。我曾考虑过嵌套它们，但这看起来真的很难看。我喜欢这个解决方案；我现在正在测试它。@mplungjan:仍然有两个调用。这实际上是d并行执行调用，而不是强制执行顺序调用。它们确实不是大文件，这是一次性任务。我曾考虑过嵌套它们，但这看起来非常难看。我喜欢这个解决方案；我现在正在测试它。要获取第二个文件，是否需要第一个文件中的数据，或者可以同时请求和JUDon’不要等到两个都到达了？我正在同一组轴上绘制数据，所以我同时需要它们，但我可以先得到一个，也可以同时得到一个。在我得到它们之前，我无法生成图形。您是否需要第一个文件中的数据来获取第二个文件，或者您可以同时要求两个文件，然后等待它们都得到到达？我正在将数据绘制在同一组轴上，因此我同时需要它们，但我可以先获取一个轴，也可以同时获取一个轴。只有在拥有它们之前才能构建图形。我想我更喜欢
$。当（$.ajax（“/page1.php”），$.ajax（/page2.php”）。然后（myFunc，myFailure）
@mplungjan在这种情况下，您将在何处保留您的响应？@mplungjan刚刚阅读了它的文档，我们在成功回调中得到了两个响应。这样会更干净。特别是因为我相信您的构造不会延迟响应calls@mplungjan同意。在我的例子中，Ajax调用在移交给不同的API之前就开始了。我想我fer
$.when（$.ajax（“/page1.php”），$.ajax（“/page2.php”）。然后（myFunc，myFailure）
@mplungjan在这种情况下，您将在何处保留您的响应？@mplungjan刚刚阅读了它的文档，我们在成功回调中得到了两个响应。这样会更干净。特别是因为我相信您的构造不会延迟响应calls@mplungjan同意。在我的例子中，Ajax调用在将其移交给不同的API之前开始。