Fatal编程技术网
  • javascript/
  • 如何使用javascript读取带有数组数据的本地json文件？

如何使用javascript读取带有数组数据的本地json文件？

javascript jquery json ajax file

如何使用javascript读取带有数组数据的本地json文件？,javascript,jquery,json,ajax,file,Javascript,Jquery,Json,Ajax,File,我有这个.json文件，我想将它加载到一个全局变量中，我可以使用AJAX、JavaScript从所有web访问该变量。我怎么做？我想通过索引访问变量，例如my_var[1].img。我读了很多帖子，但没有找到解决办法 myData.json { "data": [ { "img": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRHQ5Sf2Cffo0QdRtFw0t8zdk90FWgywc1kDKAuOV874zYO_0pC"

我有这个
.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>


我的网页
var my_json；
$.getJSON（“myData.json”，函数（json）{
my_json=json；
});
鉴于
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();
});
请注意，这会降低脚本速度，并在请求完成之前停止页面的呈现和执行，因此我并不建议您这样做。

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

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