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

Question

如下面的代码所示，我正在尝试读取一个 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

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

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

• 在回调函数中编写代码

• 使用函数链（即得到响应后可以拨打电话 到其他函数并在该函数中编写代码）。

Answer 2

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

这意味着只要您的d3.json 函数触发，console.log 函数也会触发。他们一起被解雇了。

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

你可以：

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 3

因为：

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()
});

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

很确定是异步调用。

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

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