从外部获取数组 Json

Question

我有一个外部 json 文件 file.json，我试图在其中存储一个数组，以便将其用作 Javascript 数组。 JSON 文件：

{
    "data": [
        {
            "Name": "Steve",
            "Number": "120",
            "Number2": "78",
            "Number3": "75",
            "Number3": "85"
        },
        {
            "Name": "Bob",
            "Number": "130",
            "Number2": "98",
            "Number3": "85",
            "Number3": "85"
        },
        {
            "Name": "Joe",
            "Number": "430",
            "Number2": "88",
            "Number3": "75",
            "Number3": "89"
        }
    ]
}

"data": 之后有一个数组，我想将其用作数组。这是我尝试过的：（只是为了测试）

$.getJSON( "file.json", function( json ) {
    for (var i = 0; i < json.data.length; i++) {
        var Test = json.data[i]; 
        console.log(Test.Name);
    }
});
alert(Test.Name);

虽然它不是 return 数组，但警报也不起作用。是否有一个原因？而且，如果我可以在函数外部获取变量或对象，我如何创建一个数组并将其获取到外部？谢谢！

Answer 1

$.getJSON() 与您的 alert() 同时启动，但回调函数 (function( json )) 直到数据被提取和加载后才会被调用。

所以当您要求 alert(Test.Name) 时，没有 Test.Name 提醒！那还没有处理。

var Test = []
$.getJSON( "file.json", function( json ) {
   for (var i = 0; i < json.data.length; i++) {
      Test = json.data[i]; 
      console.log(Test.Name);
      alert(Test.Name);
   }
});

您将无法在函数外部访问 Test，因为它是在函数中定义的。在函数外部的范围内定义它可以访问它，但在 JSON 回调完成之前它将是一个空数组。

Answer 2

// Define it where you want it to be accessible
var people;

$.getJSON("file.json", function (json) {
    // Store the data in people to make it accessible globally
    people = json.data;
    people.forEach(function(person){ console.log(person.Name); });
    doSomethingElse();
});

// Would cause an error, you didn't receive the data yet
alert(people[0].Name); // Uncaught TypeError: Cannot read property '0' of undefined

// Would work if it is called after receiving the data (inside the callback or later)
function doSomethingElse(){
    alert(people[0].Name); // 'Steve'
}

Answer 3

这是由于 $.getJSON 的异步操作造成的。本质上发生的事情是 JS 引擎在您的程序中运行，遇到 $.getJSON 的语句，执行它（然后等待事件循环中的响应）并继续执行下一个语句 alert.由于事件循环还没有四处查看是否有响应，但 Test.name 的值是 undefined （实际上应该抛出一个错误，除非你在$.getJSON 响应处理程序）。

例如：

var foo;

// using setTimeout as a proxy async operation for $.getJSON
setTimeout(function() {
  foo = 'FOO';
  console.log('Inside the async operation', foo);
}, 0); // Approximate running in next loop of the event cycle

console.log('Outside the async operation', foo);

你认为输出会是什么？运行它并检查您的控制台输出或只看这里：

> Outside the async operation undefined
> Inside the async operation FOO

那么如何在不将代码嵌入响应函数的情况下获取其余代码的值呢？两种主要方式是使用回调函数（类似于 Node 的首选样式）或使用 promises。

如果您没有注意到您已经在使用回调函数。这就是您传递给 $.getJSON 的函数的名称。因此，您可以向该函数添加更多代码，或将其分解为从现有响应处理程序调用的另一个函数。

setTimeout(function() {
  var foo = 'FOO';
  console.log('Inside the async operation', foo);

  myOtherCode(foo);
}, 0); // Approximate running in next loop of the event cycle

function myOtherCode(foo) {
  console.log('Outside the async operation', foo);
}

或者您可以使用承诺。由于 Promise 的原生 JS 实现相对较新，因此存在许多库，允许您在较旧的浏览器上使用它们并包含额外的功能。

从外部获取数组 Json

Get array from external Json

javascript

arrays

json

external