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

时间:2016-12-03 10:12:50

标签: 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", "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>

2 个答案:

答案 0 :(得分: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();
});

如果要在脚本正文中访问变量(即不在另一个函数内),那么您唯一能做的就是使用{{1}创建的同步请求},像这样:

XMLHttpRequest

请注意这会降低您的脚本速度并停止呈现和执行您的页面,直到请求完成,所以我不建议您这样做。

答案 1 :(得分:1)

您可能需要更改此信息:
my_json = json.data。