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

琼·特里(Joan Triay)

我有这个.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>
马可·博内利(Marco Bonelli)

鉴于这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

请注意,这将减慢脚本速度并暂停页面的呈现和执行,直到请求完成为止,因此,我不建议这样做。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Vanilla Javascript,如何读取本地JSON文件

来自分类Dev

使用 Javascript 读取本地 JSON 文件

来自分类Dev

如何使用React读取本地服务器JSON文件?

来自分类Dev

如何使用Javascript读取本地文件(从Electron App运行)

来自分类Dev

如何使用Javascript读取本地文件(从Electron App运行)

来自分类Dev

如何使用JavaScript离线读取JSON文件?

来自分类Dev

用JavaScript读取本地JSON文件

来自分类Dev

如何读取包含数组的PHP文件

来自分类Dev

如何从本地存储的文件读取JSON?

来自分类Dev

节点-如何从本地文件正确读取json?

来自分类Dev

ionic使用$ cordovaFile读取本地json文件

来自分类Dev

使用SwiftyJSON读取本地JSON文件

来自分类Dev

ionic使用$ cordovaFile读取本地json文件

来自分类Dev

如何使离子应用程序从应用程序本地的.json文件中读取json数据

来自分类Dev

如何使用javascript显示JSON数组数据?

来自分类Dev

如何使用SwiftyJSON读取数组中的JSON数据?

来自分类Dev

JavaScript读取本地文件

来自分类Dev

AngularJS:如何使用angular从json文件中读取数据

来自分类Dev

如何使用dc.js从JSON文件读取数据?

来自分类Dev

读取包含本地文件的SAM文件

来自分类Dev

如何使用Node.js从json文件读取数据并将读取的数据显示为html?

来自分类Dev

如何读取JSON的内部数组数据?

来自分类Dev

如何从URL读取JSON数组数据

来自分类Dev

如何读取JSON的内部数组数据?

来自分类Dev

如何从 JSON 文件中读取数组?

来自分类Dev

使用 javascript 数组从 JSON 文件请求数据

来自分类Dev

如何使用JSON本地数据创建包含文本和下拉框的Kendo Grid

来自分类Dev

如何从其中包含对象的数组中读取数据

来自分类Dev

如何读取其中包含数组的文件.txt?

Related 相关文章

  1. 1

    Vanilla Javascript,如何读取本地JSON文件

  2. 2

    使用 Javascript 读取本地 JSON 文件

  3. 3

    如何使用React读取本地服务器JSON文件?

  4. 4

    如何使用Javascript读取本地文件(从Electron App运行)

  5. 5

    如何使用Javascript读取本地文件(从Electron App运行)

  6. 6

    如何使用JavaScript离线读取JSON文件?

  7. 7

    用JavaScript读取本地JSON文件

  8. 8

    如何读取包含数组的PHP文件

  9. 9

    如何从本地存储的文件读取JSON?

  10. 10

    节点-如何从本地文件正确读取json?

  11. 11

    ionic使用$ cordovaFile读取本地json文件

  12. 12

    使用SwiftyJSON读取本地JSON文件

  13. 13

    ionic使用$ cordovaFile读取本地json文件

  14. 14

    如何使离子应用程序从应用程序本地的.json文件中读取json数据

  15. 15

    如何使用javascript显示JSON数组数据?

  16. 16

    如何使用SwiftyJSON读取数组中的JSON数据?

  17. 17

    JavaScript读取本地文件

  18. 18

    AngularJS:如何使用angular从json文件中读取数据

  19. 19

    如何使用dc.js从JSON文件读取数据?

  20. 20

    读取包含本地文件的SAM文件

  21. 21

    如何使用Node.js从json文件读取数据并将读取的数据显示为html?

  22. 22

    如何读取JSON的内部数组数据?

  23. 23

    如何从URL读取JSON数组数据

  24. 24

    如何读取JSON的内部数组数据?

  25. 25

    如何从 JSON 文件中读取数组?

  26. 26

    使用 javascript 数组从 JSON 文件请求数据

  27. 27

    如何使用JSON本地数据创建包含文本和下拉框的Kendo Grid

  28. 28

    如何从其中包含对象的数组中读取数据

  29. 29

    如何读取其中包含数组的文件.txt?

热门标签

归档