如何使用 javascript 读取包含数组数据的本地 json 文件？答案

【问题标题】：How can I read local json file with array data using javascript?如何使用 javascript 读取包含数组数据的本地 json 文件？
【发布时间】：2017-04-18 05:08:49
【问题描述】：

我有这个 .json 文件，我想将它加载到一个全局变量中，我可以使用 AJAX、JavaScript 从所有 Web 访问该变量。我该怎么做？我想通过索引访问变量，例如my_var[1].img。我读了很多帖子，但我没有找到解决方案。

myData.json

{
 "data": [
 { "img": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRHQ5Sf2Cffo0QdRtFw0t8zdk90FWgywc1kDKAuOV874zYO_0pC", "other": "Ra.One" },
 { "img": "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQkVg9n2UbPTeiPNGUOw2SqdAzJsZzuHrkYw78sjaMMCcTWcuFjUtT3NZ8", "other": "3 Idiots" },
 { "img": "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ0Wam0d96ASpEHDFfskGTBdILKlDpXAKzELFdfdKmkoye5JmrF9qS1u1qtZw", "other": "Chaalis Chauraasi (4084)" },
 { "img": "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSAf7q-m96JL88_W8EATmVlwCfOKb5dw1keyDSO6PWwzaSVtqGyix2lvE", "other": "Gangs Of Wasseypur" }
 ]}

index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyWeb</title>

 <script type="text/javascript" src="myData.json"></script>
 <script src="https://code.jquery.com/jquery-1.10.2.js"></script>

 </head>
 <body>

<script>
 var my_json;
 $.getJSON("myData.json", function(json) {
 my_json = json;
 });
</script>
</body>
</html>

【问题讨论】：

标签： javascript jquery json ajax file

【解决方案1】：

鉴于jQuery.getJSON 是一个异步函数，您必须在回调中使用数据。如果你想将它保存在一个全局变量中，请记住你仍然必须使用一个由getJSON 的回调调用的函数来使用它（虽然我不推荐它）。给定您的 JSON 结构，您可以使用 json.data[index].img 访问图像，并创建像 my_json = json.data 这样的全局变量，以便以后像 my_json[index].img 那样使用它。这是一个例子：

var my_json;

function useTheData() {
    for (var i = 0; i < my_json.length; i++) {
        console.log(i, "-", my_json[i].img);
    }
} 

$.getJSON("myData.json", function(json) {
    my_json = json.data;
    useTheData();
});

如果您想访问脚本主体中的变量（即不在另一个函数中），那么您唯一能做的就是使用由XMLHttpRequest 创建的同步请求，像这样：

var xhr = new XMLHttpRequest(),
    my_json;

xhr.open('GET', 'myData.json', false);
xhr.send();

my_json = JSON.parse(xhr.responseText).data;

// Now use the my_json variable anywhere you want

请注意，这会减慢您的脚本并暂停页面的呈现和执行，直到请求完成，所以我真的不建议这样做。

【讨论】：

我建议你重新阅读你的代码，因为它永远不会运行。
这很好用，但我不希望函数使用数据，我希望将数据使用到脚本而不是函数中。有可能吗？
@JoanTriay 不，这是不可能的。您的请求是异步的，因此您无法在不知道请求何时完成的情况下访问脚本中的变量：您会发现它未定义。
@JoanTriay 好吧，您可以使用 XMLHttpRequest 发出同步请求，但我不建议这样做，因为它会减慢您的整个脚本并冻结页面直到它完成了工作。
@JoanTriay 在这里。

【解决方案2】：

您可能需要更改此设置：
my_json = json.data.

【讨论】：