我如何读取Json文件并将一些数据存储在数组中，然后在读取文件后访问它？ [重复]

Question

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

• d3 javascript中的变量范围 1回答

如下面的代码所示，我正在尝试读取Json文件并将json文件中的某些值推入数组中，如果在函数中访问该数组，则该值将正确存储

但是当回调函数结束时，数组为空为什么数组不包含推入的值？

var latArray = new Array();
var longArray = new Array();
var getLatLong = d3.json("./SRC/ratp_2013.json", function (error, data){



        for(i in data.stops)
        {
            longArray.push(data.stops[i].longitude);
            latArray.push(data.stops[i].latitude);
        }

        console.log(longArray); //Prints the Array of latitudes
        console.log(latArray);  //Prints the Array of longitudes
});
console.log(longArray); //Prints an empty array.
console.log(latArray);  //Prints an empty array.

Answer 1

可以肯定的是异步调用。

您的控制台是否先打印空数组，然后再打印填充数组？

如果它是一个异步调用，则此调用也应该有一个“ onDataLoaded”事件。

Answer 2

这是由于调用的异步性质而发生的。 程序的执行将不等待响应并从下一行开始执行。 您可以在以下链接上找到更多详细信息： D3 API

因此，在这种情况下，您可以使用以下任一选项获得所需的结果：

• 在回调函数中编写代码

• 使用功能链（即在获得响应后，您可以调用其他功能，并在该功能内编写代码）。

Answer 3

我猜d3.json是一个异步函数。

这意味着，一旦您的d3.json函数启动， console.log函数也会启动。 他们都被一起开除。

因此，在读取文件时，您正在调用那些console.log 。

您可以：

1. 使用回调内部的数据。
2. 创建一个Promise （ES6）...

var d3Action = new Promise(function(resolve, reject){
  var latArray = [],
      longArray = [],
      getLatLong = d3.json("./SRC/ratp_2013.json", function (error, data){

        for(i in data.stops) {
          longArray.push(data.stops[i].longitude);
          latArray.push(data.stops[i].latitude);
        }
        resolve(longArray, latArray);

      });
});

d3Action.then(function(longArray, latArray){
  console.log(longArray, latArray)
})

Answer 4

这与执行时间有关。

JSON调用是异步的。 这意味着浏览器无需等待。

您的执行路径如下所示：

• 定义数组
• 调用JSON
• console.log数组
• 接收JSON
• 将信息放入数组

试试这个代替：

var latArray = new Array();
var longArray = new Array();
var getLatLong = d3.json("./SRC/ratp_2013.json", function (error, data){



        for(i in data.stops)
        {
            longArray.push(data.stops[i].longitude);
            latArray.push(data.stops[i].latitude);
        }

        logArrays();
});
function logArrays() {
   console.log(longArray); //Prints an empty array.
   console.log(latArray);  //Prints an empty array.
}

这样，执行路径为：

• 定义数组
• 调用JSON
• 接收JSON
• 将信息放入数组
• 通话记录功能
• console.log数组

Answer 5

因为这：

console.log(longArray); //Prints an empty array.
console.log(latArray);  //Prints an empty array.

在此之前运行：

var getLatLong = d3.json("./SRC/ratp_2013.json", function (error, data){
    for(i in data.stops)
    {
        longArray.push(data.stops[i].longitude);
        latArray.push(data.stops[i].latitude);
    }

    console.log(longArray); //Prints the Array of latitudes
    console.log(latArray);  //Prints the Array of longitudes
});

传递给d3.json的函数是异步执行的。

如果您这样重写它，它应该可以工作：

function logResult() {
  console.log(longArray);
  console.log(latArray);
}

var getLatLong = d3.json("./SRC/ratp_2013.json", function (error, data){

    for(i in data.stops)
    {
        longArray.push(data.stops[i].longitude);
        latArray.push(data.stops[i].latitude);
    }
    logResult()
});