How can I read local json file with array data using javascript?

Question

I have this .json file and I want to load it in a global variable that I can access from all web using AJAX, JavaScript. How can I do it? I want to access the variable by the index, for example my_var[1].img. I read a lot of posts but I didn't find the solution.

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 · Accepted Answer · 2016-12-03 11:58:05Z

1

Given that jQuery.getJSON is an asynchronous function, you have to use the data inside your callback. If you want to save it in a global variable, just remember that you still have to use a function, called by the callback of getJSON, to use it (altough I wouldn't recommend it). Given your JSON structure, you can access the images with json.data[index].img, and create the global variable like this my_json = json.data to use it later like this my_json[index].img. Here's an example:

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();
});

If you want to access your variable in the body of your script (i.e. not inside another function), then the only thing you can do is to use a synchronous request created with XMLHttpRequest, like this:

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

Beware that this will slow down your script and halt the rendering and execution of your page until the request is finished, so I don't really recommend doing this.

edited Dec 3, 2016 at 11:58

answered Dec 3, 2016 at 10:23

Marco Bonelli

71k21 gold badges129 silver badges153 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Stephan Bijzitter Over a year ago

I suggest you re-read your code, because this will never run.

Joan Triay Over a year ago

This works well, but I do not want the function useThe Data, I want use the data into the script not into the function. Is it possible?

Marco Bonelli Over a year ago

@JoanTriay Nope, it isn't possible. Your request is asynchronous, so you cannot access the variable in the script without knowing when the request has finished: you would find it undefined.

Marco Bonelli Over a year ago

@JoanTriay well, you could make a synchronous request using XMLHttpRequest, but I wouldn't recommend it since it will slow down your whole script and freeze the page until it's done working.

Marco Bonelli Over a year ago

@JoanTriay here it is.

|

Xinzoop · Accepted Answer · 2016-12-03 10:33:06Z

1

You may need to change this:
my_json = json.data.

answered Dec 3, 2016 at 10:33

Xinzoop

1114 bronze badges

Collectives™ on Stack Overflow

How can I read local json file with array data using javascript?

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related